@charset "UTF-8";
/* CSS Document */

/* common
--------------------------------------------------------------------------- */
html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html,body{height:100%; }
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #01b3fd;}
a:visited { color: #01b3fd;}
a:hover { color: #069; transition: all .3s;}
a:active { color: #09C;}

body,td,th { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-color: #ccc;	font-size: 16px; line-height: 180%; color: #333;}
hr{ border:solid 1px #333;}
.opp{ filter:alpha(opacity=30)!important; -moz-opacity: 0.3!important; opacity: 0.3!important;}
.clearfix{ clear:both;}
.rights_mark { height: 8px; padding-bottom: 5px; opacity: 0.7;}
.present_mark { padding: 6px 4px; width: 5em!important;}

.pagetop { display: none; position: fixed; bottom: 0px; right: 0px;}
.pagetop a {
    display: block;
    background-color: #ffec02;
    text-align: center;
    color: #000;
    font-size: 15px;
    text-decoration: none;
    padding: 5px 15px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.8;
}
.pagetop a:hover {
    display: block;
    text-align: center;
    color: #000;
    font-size: 15px;
    text-decoration: none;
    padding:5px 15px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}



/* button-hex
--------------------------------------------------------------------------- */
.button-hex {
    font-size: 100%;
    line-height: 30px;
    position: relative;
    display: inline-block;
    width: 85%;
    height: 30%;
    transition: all .1s ease-in-out;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #ffec00;
	margin-top: 3%;
}
.button-hex:before,
.button-hex:after {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    content: '';
    border: 15px solid transparent;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
}
.button-hex:before {
    right: 100%;
    border-right-color: #ffec00;
}
.button-hex:after {
    left: 100%;
    border-left-color: #ffec00;
}
.button-hex:hover {
    opacity: .7;
}

/* header
--------------------------------------------------------------------------- */
header { text-align: center; padding-top: 0px;}
header h1 img{ width: 100%; max-width: 100%;}

/* nav
--------------------------------------------------------------------------- */
#nav { text-align: center; width:95%; max-width: 1080px;  margin: 0 auto; padding: 10px; list-style: none;}
#nav li {width: 254px; text-align: center; display: inline-block; margin: 5px;}
#nav li a { text-decoration: none; color: #fff; font-weight: bold; text-shadow: 2px 2px 4px #000;}
#nav li a:hover img{ filter:alpha(opacity=80)!important; -moz-opacity: 0.3!important; opacity: 0.3!important; transition: all .8s;}

/* section visual
--------------------------------------------------------------------------- */
.psstore{ background-image: url(../img/bg_ps.jpg); background-repeat: repeat-x;; background-color: #5a98d5;}
.eshop{ background-image: url(../img/bg_eshop.jpg); background-repeat: repeat-x; background-color: #fd8501;}
.steam{ background-image: url(../img/bg_steam.jpg); background-repeat: repeat-x; background-color: #7d7d7d;}
.xbox{ background-image: url(../img/bg_xbox.jpg); background-repeat: repeat-x; background-color: #3bd946;}
.epic{ background-image: url(../img/bg_epic.jpg); background-repeat: repeat-x; background-color: #494949;}
.cp{ background-image: url(../img/bg_cp.jpg); background-repeat: repeat-x; background-color: #f1cddc;}


.pickup_title{ background-image:url(../img/title_pickup.png); text-align: center; margin: 20px auto 0;  background-position: center; background-size: cover; text-align: center; height: 100%; min-height: 68px;}
.octagon { width: 92%; max-width:500px; height: 50px; position: relative; text-align: center; margin: 0 auto 30px;}
.octagon span{ color:#000; position:relative; z-index:3; font-size:150%; font-weight:700; color:#000; line-height:2;}
.octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 25px solid #ffec02; border-left: 20px solid rgba(238, 238, 238, 0); border-right: 20px solid rgba(238, 238, 238, 0); width: 92%; max-width:500px; height: 0;}
.octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 25px solid #ffec02; border-left: 20px solid rgba(238, 238, 238, 0); border-right: 20px solid rgba(238, 238, 238, 0); width: 92%; max-width:500px; height: 0;}

/* goods
--------------------------------------------------------------------------- */
.goods{ text-align: center; width:95%; max-width: 1080px; margin: 0 auto; padding-top: 10px;}
.goods h2{ font-size: 160%; line-height: 1.3; border-bottom: solid 2px #fff; border-top: solid 2px #fff; padding: 12px 0; margin: 30px auto; color: #fff; text-shadow: 2px 2px 4px #000;}
.goods h2 span{ font-size:70%; display: block;}
.goods h3{  font-size: 240%; line-height: 1.3; padding: 12px; margin: 30px auto 0; color: #fff; text-shadow: 2px 2px 4px #000;}
.goods .read{ color:#fff; text-shadow: 1px 1px 4px #000; font-size: 90%; text-align: left;}
.goods .read span{ font-size:150%; color:#ffec02;}
.goods .read a{ text-decoration: none; color: #ffec02;}

.goods .read span2{ display: inline-block;}

.goods .banner a{ background-color:#fff; display:block; }
.goods .banner a:hover img{ filter:alpha(opacity=70)!important; -moz-opacity: 0.7!important; opacity: 0.7!important; transition: all .8s;}

.goods ul{list-style: none; display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; padding-bottom: 20px;}
.goods li{ box-sizing: border-box; display: inline-block; width: 49%; background-color: #fff; margin: 3px auto; font-size: 80%; line-height: 1.3; position: relative; vertical-align: top;}
.goods li img{ width:100%;}
.goods li a:hover img{ filter:alpha(opacity=80)!important; -moz-opacity: 0.3!important; opacity: 0.3!important; transition: all .8s;}
.goods li .gametitle { padding:4%; display: block; text-align: left; line-height: 1.5;}
.goods li a{ text-decoration: none; color: #333;}
.goods li .price {font-size: 200%; color: #ffffff; font-weight: 700; text-align: center; line-height: 0.6; background-color: #ff0000; display: inline-block; padding: 15px 1px 0; border-radius: 50%; width: 56px; height: 43px; position: absolute; right: -1%; top: -1%; z-index: 2;}
.goods li .price span {font-size: 60%;}

.goods li .hard {text-align: center; /*background-color: red;*/ display: inline-block; padding: 1% 1%; position: absolute; left: 1%; top: 1.5%; z-index: 2;}
.goods li .hard span {font-size: 90%; color: #ffffff; font-weight: 700; text-align: center; line-height: 0.2; background-color: #444444; border: solid; border: 1px solid; border-color: #737373; padding: 3px; margin: 0 6% 0 0;}

.goods hr {height: 1px; background-color: #fff; border: none; margin: 10px auto;}

/* dlc
--------------------------------------------------------------------------- */
.dlc{ text-align:left;  width:95%; max-width: 1080px; background-color:rgba(255, 255, 255, 0.6); padding: 3% 5% 5%; position:relative; color:#000;}
.dlc h4{ font-size: 140%; color:#000; padding:20px 0 10px; line-height: 1.3; border-bottom: dotted 1px; margin-bottom: 10px;}
.dlc h5{ font-size: 100%; color:#000; padding:20px 0 10px; line-height: 0.8; }
.dlc a{ text-decoration: underline; color: #000157;}
.dlc span{ padding: 3px 5px 3px 7px; font-size: 80%; font-weight: 700; background-color: #ff0000; color: #fff; margin-right: 10px;}
.dlc .notice{ font-size:80%; line-height: 1.5; color: #333; text-indent: -1em; margin-left: 1em; padding-bottom: 5px;}


/* footer
--------------------------------------------------------------------------- */
footer {color: #333333; background-color:#fff; border-top: solid 1px #ccc;}

footer .sns { text-align: center; margin: 0px auto; width: 100%; padding: 40px 0 20px; }
footer .sns img { margin: 0 10px; }
footer { position: relative; padding-bottom: 20px; text-align: center; font-size: 13px; background-color: #000; color: #fff;}
footer .copy { font-size: 10px; color:#b7b5b5; width: 90%; max-width: 1200px; margin: 0 auto; line-height: 1.5; text-align: left; padding-bottom: 30px;}
footer .bannerstxt { padding-bottom: 20px; width: 90%; margin: 0 auto; line-height: 1.3;}
footer .bannerstxt li{ display:inline-block; padding: 5px;}

@media screen and (min-width: 768px) {
.pickup_title{ min-height: 137px;}
.goods{ padding-bottom:60px ;}
.goods li{ width: 23%; margin: 0 0.5% 1%; vertical-align: top;}
.goods h2{ font-size: 250%; padding: 24px 0; margin-top: 60px;}
.goods h2 span{ font-size:70%;}
.goods h3{  font-size: 320%;}
.goods ul{ padding-top: 30px; padding-bottom: 20px;}
.goods .read{ font-size: 100%; text-align: center;}
.dlc h4{  font-size: 160%;}
.dlc h5{  font-size: 120%;}
	
	
.button-hex {
    font-size: 90%;
    line-height: 30px;
    position: relative;
    display: inline-block;
    width: 85%;
    height: 30%;
    transition: all .1s ease-in-out;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #ffec00;
	margin-top: 3%;
}
}