@charset "utf-8";
/*  common
----------------------------------------------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css2?family=Noto+Serif:wght@200;400;600;900&display=swap);
@import url(http://use.typekit.net/joa5trj.css);




body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small; *font:x-small; background-color: #242424; color:#fff; font-family: vendetta,serif; font-weight: 200;}
select,input,button,textarea,button{ font:99% arial,helvetica,clean,sans-serif;}
table{ font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{ font-family:monospace;*font-size:108%;line-height:100%;}


a{text-decoration: none;}
img{width: auto; max-width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.flex2{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
strong{font-weight: bold;}


.pf-box{width: 90%; max-width: 900px; margin: 0 auto;  padding: 10px 0 10px 0;}
.pf1w{width: 16%;}
.pf2w{width: 27%;}
.pf3w{width: 24%;}
.pf4w{width: 18%;}
.pf5w{width: 15%;}
.lag{width: 80%; max-width: 800px; margin: 0 auto; font-size:18px; text-align: center; padding: 20px 0 100px 0; line-height:1.41; }
.lagat{font-size:70%;}





@media screen and (max-width: 700px) {
.pf-box{justify-content: center; flex-wrap: wrap;}
.pf1w{width: 10%;}
.pf2w{width: 43%;}
.pf3w{width: 33%;}
.pf4w{width: 25%;}
.pf5w{width: 25%;}
.lag{font-size:4vw;}

}

/*  menu
----------------------------------------------------------------------------------------------------------- */
.menunews{}
.menustory{}
.menuchara{}
.menusummary1{}
.menusummary2{}
.menusummary3{}
.menusummary4{}
.menumovie{}
.menuproduct{}

.menuapecial a::after{content: " NEW"; color: #dbbb29; font-size:60%;}

/*
.menunews a::after,
.menustory a::after,
.menuchara a::after,
.menusummary1 a::after,
.menusummary2 a::after,
.menusummary3 a::after,
.menusummary4 a::after,
.menumovie a::after,
.menuapecial a::after,
.menuproduct a::after{content: " NEW"; color: #dbbb29; font-size:60%;}
*/



nav.globalMenuSp { width: 70%; max-width: 480px; position: fixed; z-index: 2; top: 0; right: 0; height: 100%; overflow: auto; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/common/menu-bg.jpg); color: #000; text-align: center; transform: translateX(100%); transition: all 0.6s; -webkit-overflow-scrolling: touch;}

nav.globalMenuSp ul { margin: 0 auto 3% auto; padding: 0; width: 100%;}
nav.globalMenuSp ul li { font-size: 1.8em; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted #333;  font-family: itc-benguiat, serif;}
nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none;}
nav.globalMenuSp ul li a { display: block; color: #fff; padding: 1em 0; font-size: 25px; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }
nav.globalMenuSp ul li a:hover{color: #dde857;}

nav.globalMenuSp.active { transform: translateX(0%);}

nav.globalMenuSp .menuHeader { max-width: 50%; max-width: 300px; margin: 0 auto; padding: 1.5em 0;}
.overflowHidden { overflow: hidden;}
.Menubanner{width: 94%; margin: 0 auto; padding:0.5%;}
.Menubanner2{width: 94%; margin: 0 auto; padding:0.5% 0.5% 5% 0.5%;}

.navToggle { display: block; position: fixed; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; z-index: 3; background: #000000; border: 1px solid #fff; text-align: center;}
.navToggle span { display: block; position: absolute; width: 48px; border-bottom: solid 3px #fff; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px;}
.navToggle span:nth-child(1) {top: 15px;}
.navToggle span:nth-child(2) {top: 27px;}
.navToggle span:nth-child(3) {top: 40px;}
.navToggle span:nth-child(4) { border: none; color: #eee; font-size: 9px; font-weight: bold; top: 34px;}

.navToggle.active{right:17px;}
.navToggle.active span:nth-child(1) { top: 25px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) { top: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}

.globalMenu-sub{width: 95%; margin:-3% auto 0 auto;}
.globalMenu-sub div{width: 100%; padding:10px 0.5%;}
.globalMenu-sub a{width: 100%; margin: 0 auto; font-size: 80% !important; padding:0 !important;}



@media screen and (max-width: 700px) {
.navToggle { width: 40px; height: 40px; }
.navToggle span { width: 28px; left: 6px;}
.navToggle span:nth-child(1) {top: 8px;}
.navToggle span:nth-child(2) {top: 18px;}
.navToggle span:nth-child(3) {top: 28px;}

.navToggle.active{right:0;}
.navToggle.active span:nth-child(1) { top: 19px;}

.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) { top: 19px;}

}


@media screen and (max-width: 700px) {
nav.globalMenuSp .menuHeader { max-width: 50%; max-width: 150px; margin: 0 auto; padding: 1.5em 0;}
}





/*  出しわけ
----------------------------------------------------------------------------------------------------------- */
.pc-only{display:block;}
.sp-only{display:none;}

@media screen and (max-width: 700px) {
.pc-only{display:none;}
.sp-only{display:block;}
}


/*  footer
----------------------------------------------------------------------------------------------------------- */
.base-footer-txt-link{width: 100%; max-width: 200px; margin: 0 auto; text-align: center; padding-bottom: 20px; }
.base-footer-txt-link li{padding: 8px; font-size: 15px;}
.base-footer-sns-btn{width: 100%; max-width: 125px; margin: 0 auto;}
.base-footer-sns-btn li{padding: 8px;}

.base-footer-txt-link li:nth-child(2){border-left: solid 1px #fff;}

.base-footer-sns-btn img{width: 100%; max-width: 45px;}
.base-footer-box{padding: 14px 0 48px 0; background: url(https://www.koeitecmoamerica.com/fatalframe/mobw/img/common/footer-bg.jpg); margin-top: 10%;}

.base-footer-txt-link a:link { color: #fff; text-decoration: underline;}
.base-footer-txt-link a:visited { color: #fff; }
.base-footer-txt-link a:hover { color: #fff;  text-decoration: none;}
.base-footer-txt-link a:active { color: #fff; }

.base-ratinglogo-box {
    width: 100%;
    max-width: 170px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
   
}
.base-ratinglogo-box img{ image-rendering: -webkit-optimize-contrast;}

@media screen and (max-width: 320px) {
	  .base-footer-txt-link{display: block;}
	  .base-footer-txt-link li{padding: 4px;}
	  .base-footer-sns-btn{max-width: 190px; padding-top: 16px;}
	  .base-footer-sns-btn li{padding: 1%;}
}





/*  footer -copyright
----------------------------------------------------------------------------------------------------------- */
.base-copyright{width: 95%; max-width: 1200px; margin: 0 auto; font-size: 16px; line-height:1.4; padding: 16px 0; text-align: center;}
.base-copyright span img{max-height: 16px;}
.base-copyright-win-txt{}
.base-copyright-ss-txt{padding-bottom: 16px;}
.base-copyright-txt{padding-top: 16px;}
.base-copyright img[src$=".gif"], .base-copyright img[src$=".png"] {
mage-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */
image-rendering: pixelated;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (非標準プロパティ) */
}


/*  footer -befrienders
----------------------------------------------------------------------------------------------------------- */
.base-befrienders{width: 95%; max-width: 1200px; margin: 0 auto; font-size: 18px; line-height:1.4; padding: 8px 0; text-align: center;}
.base-befrienders-txt{padding-bottom: 16px;}
.base-befrienders-txt a{ color: #93aac6; text-decoration: underline;}
.base-befrienders-txt a:visited { color: #93aac6; }
.base-befrienders-txt a:hover { color: #93aac6; }
.base-befrienders-txt a:active { color: #93aac6; }


/*  page-top
----------------------------------------------------------------------------------------------------------- */
#pageTop{ position: fixed; bottom: 20px; right: 20px; }
#pageTop a { display: block; z-index: 997; padding: 8px 8px 0 8px; width: 40px; height: 40px; color: #fff; font-weight: bold; text-decoration: none; text-align: center; }
#pageTop a:hover { text-decoration: none; opacity: 0.7;}


/*  動画埋め込み
----------------------------------------------------------------------------------------------------------- */
.movie_emb_box{width: 100%; max-width: 1000px; margin: 10px auto 0 auto;}
.movie_emb{ position: relative; width: 100%; padding-top: 56.25%;}
.movie_emb iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.movie-btn{position: relative;}
.movie-thumbnail{}
.movie-thumbnail-btn{position: absolute; top:0;}
.movie-thumbnail-btn:hover{opacity:0.65;}


span.h4-new-icon{display:inline; color:#ff0; font-size:70%;}