@charset "utf-8";


body{background: #000;}

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


/*-- header ---------------------------------------------------------------------------- */

.catch{width: 80%; max-width: 524px; margin: 0 auto; font-size:30px; text-align: center; padding: 10% 0 0 0; font-family: itc-benguiat, serif;}
.main-logo{width: 80%; max-width: 900px; margin: 0 auto;}
.catch span{ color:#cc041b; font-weight: 600;}
.day{width: 80%; max-width: 524px; margin: 0 auto; font-size:30px; text-align: center; padding: 10px 0 20px 0; font-family: itc-benguiat, serif;}
.movie-btn{width: 80%; max-width: 300px; margin: 10px auto 10% auto;  padding: 0;}


.header-cont-box{width:90%; max-width:1500px; margin: 0 auto;
	background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/header_pc.jpg) 100% 0 no-repeat;
	-moz-background-size: auto 100%;
	background-size: auto 100%;

}
.header-cont-box2{width:90%; max-width:1300px; margin: 0 auto;}
.header-cont-left-box{width:65%; }


@media screen and (max-width: 700px) {
.header-cont-box{width:95%; margin: 0 auto;  position: relative;
	background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/header_sp.jpg) 0 0 no-repeat;
	-moz-background-size: 100% auto;
	background-size: 100% auto;

}
.header-cont-box2{width:95%; margin: 0 auto;}
.header-cont-left-box{width:100%; padding-top:50%; margin: 0 auto;}
.catch{font-size:4vw; text-align: center; padding: 5% 0 0 0;}
.main-logo{width: 90%; max-width: 600px; margin: 0 auto;}
.day{font-size:4vw; text-align: center; padding: 0 0 5% 0;}

.movie-btn{width: 95%; max-width: 600px;  border: solid 1px #fff;}




}





/*-- common ---------------------------------------------------------------------------- */


h3{font-size: 3vw; 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: itc-benguiat, serif; font-weight: 400;
text-shadow: 
    black 1px 1px 10px, black -1px 1px 10px,
    black 1px -1px 10px, black -1px -1px 10px;
}

a.btn_arrow { position: relative; display: block; width: calc(100% - 10px); padding: 5px 10px; color: #333; text-decoration: none; background:#3a526e; text-shadow:none; color: #fff;}
.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: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;}
.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;}


@media screen and (max-width: 700px) {
h3{font-size: 4.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;}
}


/*  言語出し分け
----------------------------------------------------------------------------------------------------------- */
.languge__item { position: absolute; top:0; left:0; width: 150px; background: #000; border: solid 2px #fff; color: #fff; cursor: pointer; display: block; margin-bottom: 1px; z-index:999; font-size: 16px;}
.languge__item__link { color: #fff; display: block; line-height: 26px; padding: 3px 1rem 0 1rem; position: relative;}
.languge__item__link:after { content: '▼'; display: block; line-height: 30px; position: absolute; right: 0; text-align: center; top: 0; width: 25px;}
.submenu { background: #000; display: none;}
.submenu li:hover{ background: #717171;}
.submenu__item { border-top: 2px solid #fff; color: #fff; padding: 1rem;}
.submenu__item a{color: #fff; text-decoration: none;}
.submenu__item a:visited { color: #fff; }
.submenu__item a:hover { color: #fff;}
.submenu__item a:active { color: #fff; }

.icon { position: relative; top: 5px; left: 5px;}

@media screen and (max-width: 700px) {
.languge__item { width: 110px; border: solid 1px #fff;}
.languge__item__link { color: #fff; display: block; line-height: 26px; padding: 3px 1rem 0 0.5rem; position: relative;}
.submenu__item { border-top: 1px solid #fff; color: #fff; padding: 0.5rem;}
}


/*  BGM
----------------------------------------------------------------------------------------------------------- */

.bgm-box {
  position: absolute;
  top:10px;
  left:160px;
  width: 150px;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  z-index:999;
}

.bgm-off-btn img{height: 20px;}
.bgm-on-btn img{height: 20px;}

@media screen and (max-width: 700px) {
.bgm-box {
left:120px;;
width: 120px;

}

}


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









/* topic
----------------------------------------------------------------------------------------------------------- */
#news{padding: 2% 0; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/news-main-bg.jpg); -moz-background-size:100% auto; background-size:100% auto; }

.slider1{width: 95%; max-width: 1000px; margin: 0 auto; justify-content: space-between; padding-bottom:3%;}
/*
#news .swiper-container-horizontal > #news .swiper-pagination-bullets .swiper-pagination-bullet{}
#news .swiper-container-horizontal > #news .swiper-pagination-bullets{margin:0; bottom:0;}
#news .swiper-container-horizontal > #news .swiper-pagination-bullet{margin:0; bottom:0;}
*/

.swiper-pagination-bullet{ width: 300px; height: 8px; display: inline-block; border-radius: 0; background: #000; opacity: 1;}
.swiper-pagination-bullet-active{ opacity: 1; background: #3a526e;}

#news .swiper-container-horizontal > .swiper-scrollbar {
	height: 8px; width: 95%; max-width: 500px; left:0; right:0; margin: 0 auto;
}
#news .swiper-scrollbar {
	background: #000;
	border-radius: 0;
}
#news .swiper-scrollbar-drag {
	background: #3a526e;
	border-radius: 0;
}



.slider2 .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{ width: 90%;  max-width: 970px; left: 0; right:0; margin: 0 auto; background: #818b74; top: auto; bottom: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
.slider2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #000;}
.slider2 .swiper-scrollbar-drag{background: #800000; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
.slider2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #3a526e; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}



#chara .swiper-container-horizontal > .swiper-scrollbar {
	height: 8px; width: 90%; max-width: 330px; left:0; right:0; margin: 0 auto;
	border-radius: 0; -webkit-border-radius: 0; 
}




.news-box .swiper-slide{height: auto;}
.news-box{ display: flex; justify-content: space-between;}
.news-bg{ background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/news-bg.jpg); display: flex; flex-direction: column;}
.news-cont{ padding: 5px; }
.date{width:100%; padding-top: 2px; text-align:right;color: #000000; margin-top: auto; position: absolute; bottom:0; right: 3px; font-size: 18px;}
 

.news-img{width:100%;}
.news-img img{width:100%;}
.news-txt{font-size:18px; color: #000000; padding: 3% 0 5% 0; margin-bottom: 5%; line-height:1.41;}

.news-txt a{ color: #cc3300; text-decoration: underline;}
.news-txt a:visited { color: #cc3300; }
.news-txt a:hover { color: #cc3300; text-decoration: none;}
.news-txt a:active { color: #cc3300; }

.date{width:100%; padding-top: 2px; text-align:right;color: #000000; margin-top: auto;}

@media screen and (max-width: 700px) {
.news-txt{font-size:3vw; padding: 5%; line-height:1.61;}

.swiper-pagination-bullet{ width: 100px;}
}


/* banner */
#banner{padding: 3% 0; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/banner-bg.jpg); -moz-background-size:100% auto; background-size:100% auto;}
.banner-box{width:95%; max-width:1000px; margin: 0 auto;}
.banner-box li{width:31%; padding:1%;}

.banner-box-free-btn a{
	width: calc(100% - 2px);
	padding: 3% 0;
	text-align: center;
	color: #fff;
	display: block;
	 background:#9f2914;
	 border: solid 1px #fff;
	 margin-top: 3%;
	 font-size:2.5vw;
}


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


/* story
----------------------------------------------------------------------------------------------------------- */

#story{padding: 5% 0; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/story-bg.jpg); -moz-background-size:100% auto; background-size:100% auto;}
.story-box{width:90%; max-width:900px; margin: 0 auto; font-size: 1.6vw; line-height:2; 
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;
}
.story-box p{padding-bottom: 3%;}

@media screen and (max-width: 700px) {
#story{padding: 10% 0; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/story-bg.jpg); -moz-background-size: auto 100%; background-size: auto 100%;}

.story-box{
	font-size: 2.8vw;
}


}


/* chara
----------------------------------------------------------------------------------------------------------- */
#chara{}
.psbox{position: relative;}

.chara1{width:90%; height: 48vw; background:url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/chara1-pc.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding: 7% 5% 5% 5%;}
.chara2{width:90%; height: 48vw; background:url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/chara2-pc.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding: 7% 5% 5% 5%;}
.chara3{width:90%; height: 48vw; background:url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/chara3-pc.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding: 7% 5% 5% 5%;}



.thumb-list {width:90%; max-width:330px; margin: 0 auto; padding: 0; display: flex;	flex-wrap: wrap; justify-content: space-between;}
.thumb-item { list-style: none;  width: 33%;}

.chara-box{width:90%; max-width:850px; margin: 0 auto; font-size: 1.5vw; line-height:1.61; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;}
.charaname{ width:50%; max-width:400px; font-size: 35px; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/charaname_bg.png) bottom center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding:3% 3% 2% 1%; font-family: itc-benguiat, serif; font-weight: 400;}


.charadata{padding-bottom: 2%;}
.charadata p{padding-bottom: 3%;}

.voice-box{width:45%; max-width:220px;  text-shadow: none;}
.zoom-box{width:95%; padding: 0 3%  0 0;}
.characontrols a{display:block; width:100%; padding: 0 3%;  background:#fff;}
.bgmcontrols a{display:block; width:100%; padding: 8px 3% 0 3%; color: #fff;}
.bgm-txt{padding: 4px;}

.voicename{width:80%;}
.voiceicon{width:20%;}

.voice-box a{ color: #000;}
.voice-box a:visited { color: #000; }
.voice-box a:hover { color: #000;}
.voice-box a:active { color: #000; }


.zoom-box a{ color: #fff; text-decoration: underline;}
.zoom-box a:visited { color: #fff; }
.zoom-box a:hover { color: #fff; text-decoration: none;}
.zoom-box a:active { color: #fff; }




@media screen and (max-width: 700px) {
.chara1{width:90%; height: 130vw; background:url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/chara1-sp.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding: 7% 5% 5% 5%;line-height:1.61; }
.chara2{width:90%; height: 130vw; background:url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/chara2-sp.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding: 7% 5% 5% 5%;line-height:1.61;}
.chara3{width:90%; height: 130vw; background:url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/chara3-sp.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; padding: 7% 5% 5% 5%;line-height:1.61;}


.chara-box{width:100%; max-width:850px; margin: 0 auto; font-size: 1.8vw; display: flex; justify-content: space-between;}
.charaname{ width:95%; max-width:800px; font-size: 5vw; padding:2% 3% 5% 3%; line-height:1; }

.chara-box-in{ display: flex; flex-direction: column; width:100%; height: 115vw;}

.charadata{font-size:3vw; margin-top: auto;}

.charadata2{}
.voice-box{width:45%; max-width:auto;  text-shadow: none; font-size: 3vw;}
.zoom-box{width:45%; max-width:auto;  padding: 0 3%; font-size: 3vw;}

}



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

.summary-txt-box{
	width:95%;
	max-width:950px;
	margin: 0 auto;
	font-size:1.5vw;
	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;
}

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

.summary-btn{width:95%; max-width:900px; margin: 0 auto; font-size: 1.8vw;}
.summary-btn li{width: 31%;  margin:1%;}

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

@media screen and (max-width: 700px) {

#summary{
	background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/summary-bg.jpg) 0 0 no-repeat;
	-moz-background-size: 170% auto;
	background-size: 170% auto;
	margin-top:5%;
	padding: 5% 0;
}


.summary-txt-box2{font-size: 2.8vw;}
.summary-btn li{font-size:2.8vw;}
}





.swiper-container {
    padding-bottom: 38px;
}

.ss-box-common{width: 95%; max-width: 700px; margin: 0 auto 20px auto;}
.ss-box-common img{width: calc(100% - 2px); border: solid 1px #515151;}
.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;
}








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


.movie-txt-box{ width:95%; max-width:1000px; margin: 0 auto;}

.movie-list li{width:24%; padding:0.5%;}
.movie-btn2{width: 100%; max-width: 500px; margin: 10px auto 20px auto;  padding: 0; position: relative;}



@media screen and (max-width: 700px) {
#movie{
	background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/top/movie-bg.jpg) 0 0 no-repeat;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
	padding: 5% 0;
}
.movie-list li{width:49%; padding:0.5%;}
}






/* product
--------------------------------------------------------------------------------------------------------------- */
#product{
	padding: 5% 0 0 0;
}

.product-txt-box{ width:95%; max-width:900px; margin: 0 auto;}
.product-box{margin-bottom:2px; font-size: 1.5vw; line-height:1.61; justify-content: center;}
.product-box dt,
.product-box dd{padding: 3%; border: solid 1px #3a526e; }

.product-box dt{width: calc(14% - 4px); background:#3a526e; text-align: center; margin-right: 2px; 
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;

}
.product-box dd{width: calc(74% - 4px); text-align: left;}
.product-at{font-size:70%; padding-top:3%;}
.product-at2{font-size:130%; padding-top:3%; text-align: center;}

.product-btn{width:95%; max-width:300px; margin: 5% auto 0 auto; text-align: center; font-size: 18px;}



@media screen and (max-width: 700px) {
.product-box {font-size:3.2vw;}
.product-box dt{width: calc(100% - 4px); margin-right: 0;}
.product-box dd{width: calc(100% - 4px);  text-align: center; }
.product-at2{font-size:100%;}
}






















.flash {
  animation: flash 0.3s infinite;
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


.skew {
  animation: skew 0.3s infinite;
}
@keyframes skew {
 0% {
    transform: none;
  }
  33% {
    transform: none;
  }
  33.3% {
    transform: skewX(5deg);
  }
  33.6% {
    transform: skewX(-5deg);
  }
  33.9% {
    transform: none;
  }
  66% {
    transform: none;
  }
  66.3% {
    transform: skewX(5deg);
  }
  66.6% {
    transform: skewX(-5deg);
  }
  66.9% {
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewX(10deg);
  }
  77.6% {
    transform: skewX(-10deg);
  }
  77.9% {
    transform: none;
  }
}