@charset "utf-8";
body{background: #000;}

/*-- cont-box ---------------------------------------------------------------------------- */
.cont-box{min-width: 1000px;} 
@media screen and (max-width: 700px) {
.cont-box{min-width: auto;} 
}
/*-- common ---------------------------------------------------------------------------- */


h3{font-size: 2.8vw; width: 70%; max-width: 524px; margin: 0 auto 2% auto; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/common/line.png) bottom center repeat-x; text-align: center; padding-bottom: 20px; letter-spacing: 0.3em;
font-family: vendetta,serif; font-weight: 600;
text-shadow: 
    #141414 2px 0px 2px, #141414 -2px 0px 2px,
    #141414 0px -2px 2px, #141414 -2px 0px 2px,
    #141414 2px 2px 2px, #141414 -2px 2px 2px,
    #141414 2px -2px 2px, #141414 -2px -2px 2px,
    #141414 1px 2px 2px, #141414 -1px 2px 2px,
    #141414 1px -2px 2px, #141414 -1px -2px 2px,
    #141414 2px 1px 2px, #141414 -2px 1px 2px,
    #141414 2px -1px 2px, #141414 -2px -1px 2px,
    #141414 1px 1px 2px, #141414 -1px 1px 2px,
    #141414 1px -1px 2px, #141414 -1px -1px 2px;
}


h4{font-size: 2.5vw; width: 100%; margin: 5% auto 0 auto; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/banner-bg.jpg) top center repeat-x; padding: 1.5% 0; letter-spacing: 0.3em;
font-family: vendetta,serif; font-weight: 600;
text-shadow: 
    #141414 1px 1px 10px, #141414 -1px 1px 10px,
    #141414 1px -1px 10px, #141414 -1px -1px 10px;
}
h4 span{width: 95%; max-width: 1000px; margin: 0 auto 0 auto; text-align:center; display:block;}
.products-icon{}
.products-icon img{height: 30px;}

h4.nomargin{margin-top:0;}

h5{font-size: 2.5vw; width: 70%; max-width: 524px; margin: 5% auto 0 auto; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/common/line.png) bottom center repeat-x; text-align: center; padding-bottom: 20px; letter-spacing: 0.3em;
font-family: vendetta,serif; font-weight: 600;
text-shadow: 
    #141414 2px 0px 2px, #141414 -2px 0px 2px,
    #141414 0px -2px 2px, #141414 -2px 0px 2px,
    #141414 2px 2px 2px, #141414 -2px 2px 2px,
    #141414 2px -2px 2px, #141414 -2px -2px 2px,
    #141414 1px 2px 2px, #141414 -1px 2px 2px,
    #141414 1px -2px 2px, #141414 -1px -2px 2px,
    #141414 2px 1px 2px, #141414 -2px 1px 2px,
    #141414 2px -1px 2px, #141414 -2px -1px 2px,
    #141414 1px 1px 2px, #141414 -1px 1px 2px,
    #141414 1px -1px 2px, #141414 -1px -1px 2px;
}

@media screen and (max-width: 700px) {
h4{font-size: 4vw;}
h5{font-size: 4vw;}
}




.products-pf{width:95%; max-width:750px; margin: 0 auto 0.5% auto; text-align: center; font-size: 18px;}
.products-buy{width:95%; max-width:600px; margin: 0 auto 2% auto; text-align: center; font-size: 25px;}
.products-title{width:95%; max-width:600px; margin: 1% auto 0.5% auto; text-align: center; font-size: 25px;}

@media screen and (max-width: 700px) {
.products-pf{font-size: 3vw;}
.products-buy{font-size: 3vw;}
.products-title{font-size: 3vw;}
}




a.btn_arrow { position: relative; display: block; width: calc(100% - 10px); padding: 5px; color: #333; text-decoration: none; background:#3a526e; text-shadow:none; color: #fff; font-size: 20px;}
.free-btn a.btn_arrow:before,
.free-btn a.btn_arrow:after { content: ""; position: absolute; top: 50%;}
.free-btn a.btn_arrow:before { right: 10px; width: 18px; height: 18px; margin: -9px 0 0;}
.free-btn a.btn_arrow:after { right: 17px; width: 5px; height: 5px; margin: -4px 0 0; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.free-btn a.btn_arrow span{width: calc(94%); display:block; line-height:1.3; }

.free-btn a:hover{opacity:0.65;}


a.btn_arrow2 { position: relative; display: block; width: calc(100% - 12px); padding: 10px 5px 10px 5px; color: #333; text-decoration: none; background:#19242a; text-shadow:none; color: #fff; border: solid 1px #fff; font-size: 20px;}
.free-btn a.btn_arrow2:before,
.free-btn a.btn_arrow2:after { content: ""; position: absolute; top: 50%;}
.free-btn a.btn_arrow2:after { right: 6%; width: 10px; height: 10px; margin: -4px 0 0; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.free-btn a.btn_arrow2 span{width: calc(94% - 10px); display:block;}

a.btn_arrow3 { position: relative; display: block; width: calc(100% - 10px); padding: 10px 5px; color: #333; text-decoration: none; background:#3a526e; text-shadow:none; color: #fff; text-align: center;}
.free-btn a.btn_arrow3 span{width: 100%; display:block;}

@media screen and (max-width: 700px) {
a.btn_arrow {font-size: 3vw;}
a.btn_arrow2{font-size: 3vw;}
a.btn_arrow3{font-size: 3vw;}
h3{font-size: 5vw; width: 70%; max-width: 524px; margin: 0 auto 2% auto; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/common/line.png) bottom center repeat-x; text-align: center; padding-bottom: 20px; letter-spacing: 0.3em;}
}

.products-txt{ width: 95%; max-width: 1000px; margin: 0 auto; text-align:left; padding:3% 0; font-size: 18px; line-height:1.61;}
.products-txt2{ width: 95%; max-width: 1000px; margin: 0 auto; text-align:center; padding:3% 0; font-size: 18px; line-height:1.61;}
.products-txt3{ width: 95%; max-width: 1000px; margin: 0 auto; text-align:center; padding:0 0 3% 0; font-size: 16px; line-height:1.61;}
.swiper-container {padding-bottom: 38px;}


@media screen and (max-width: 700px) {
.products-txt3{ font-size:2.5vw;}
}


.ss-box-common{width: 95%; max-width: 1000px; margin: 0 auto 20px auto;}
.ss-box-common img{width: calc(100% - 2px);}
.ss-box-common-pagination .swiper-pagination-bullet {
    width: 70px;
    height: 8px;
    display: inline-block;
    border-radius: 0;
    background: #4d4d4d;
    opacity: 1;
    margin:0 0.5%;
}


.ss-box-common-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #3a526e;
}



.nomal-pk{width: 70%; max-width: 570px; margin: 0 auto 0 auto;}
.pre-pk{width: 100%; max-width: 700px; margin: 3% auto 0 auto; position: relative;}
.box-pk{width: 70%; max-width: 700px; margin: 0 auto 0 auto; position: relative;}
.imgzoom{width: 20%; max-width: 100px; position: absolute; bottom:0; right:0;}
.ss-box-common{width: 95%; max-width: 700px; margin: 0 auto 20px auto;}
.banner-box{width: 95%; max-width: 1000px; margin: 0 auto 20px auto;}
.banner-box li{width: 48%; padding:1%; }

.box-in-data{background: #25292e; width: 94%; max-width: 1000px; margin: 3% auto 0 auto; font-size: 16px; line-height:1.61; }
.box-in-data-list{width: 95%; padding:2.5% 0; margin: 0 auto;}
.box-in-data-costume{width: 95%; padding:0; margin: 0 auto;}
.box-in-data-costume li{width: 50%; max-width: 280px; color: #92b7d9;}

.box-in-data-at{width: 95%; padding:2.5% 0; margin: 0 auto; font-size: 12px;}


ul.shop-box{width: 95%; max-width: 1000px; margin: 0 auto; letter-spacing: 0.3em;  display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: flex-start;}
.shop-box li{width: 32%; margin:0.5%; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/products/shop-bg.jpg); padding-bottom:0.5%;  display: flex; flex-direction: column;}
.shop-btn a{width:92%; margin: 0 auto; background:#3a526e; display:block; text-align: center; color: #fff; padding:3%; margin-top: auto;}
ul.shop-box .shop-btn{ margin-top: auto;}

.shop-name{background:#3a526e; padding: 3%; text-align: center; font-size:20px;}
.shop-ss{ width:95%; position: relative; left:0;right:0; margin:2% auto;}
.shop-txt{color: #000; padding: 3%; text-align: center; font-size:18px; }


@media screen and (max-width: 700px) {
.box-in-data{font-size: 2.5vw; }
.box-in-data-at{font-size: 2vw; }
.box-in-data-costume li{width: 100%; max-width: auto; color: #92b7d9;}

.shop-box li{width: 49%;}
.shop-name{font-size: 3vw; }
.shop-ss{font-size: 2vw; }
.shop-txt{font-size: 2vw; }
}



#products1,
#products2,
#products3,
#products4{padding-bottom:3%; display:block;}




button.bgm-btn{background:transparent; color: #fff; font-family: 'Noto Serif JP', serif; border:none; padding:0;}
.bgmicon{width: 20px;}







/* products */
#products-main{
	background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/products/products-bg.jpg) #000 0 0 no-repeat;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	padding: 5% 0;
}

.products-txt-box{
	width:95%;
	max-width:900px;
	margin: 0 auto;
	font-size:1.3vw;
	text-align: center;
	line-height:2.11;
	text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;
}

.products-txt-box2{padding-bottom: 5%;}
.products-point{color:#cc3300;}

.products-btn{width:95%; max-width:1000px; margin: 0 auto; font-size: 18px; padding: 1% 0 5% 0; }
.products-btn li{width: 23%;  margin:1%;}
.products-btn li a{}
.products-btn span{}


.products-btn2{width:95%; max-width:600px; margin: 2% auto; font-size: 1.5vw; padding-bottom: 5%;}
.products-btn2 li{width: 47.5%;  margin:1.5%;}
.products-btn2 li:last-child{width: 47.5%; margin-right:0;}



.products-btn3{width:95%; max-width:1000px; margin: 0 auto; font-size: 16px; padding: 1% 0 5% 0;}
.products-btn3 li.nomalbtn{width: 33%;  margin:1%;}
.products-btn3 li.ddxbtn{width: 35%;  margin:1%;}
.products-btn3 li.dlcbtn{width: 26%;  margin:1%;}


@media screen and (max-width: 700px) {
.products-btn li{width: 48%;  margin:1%;}

.products-btn3 li.nomalbtn{width: 48%;  margin:1%;}
.products-btn3 li.ddxbtn{width: 48%;  margin:1%;}
.products-btn3 li.dlcbtn{width: 48%;  margin:1%;}
.products-btn3 li.prebtn{width: 48%;  margin:1%;}
}



.products-ss{width:100%; padding: 5% 0;}
.products-ss li{width:25%;}
.products-ss li img{width:100%;}




@media screen and (max-width: 700px) {
.products-txt-box2{font-size: 2.5vw;}
.products-btn li{font-size:2.5vw;}
}