@charset "utf-8";
/*Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:400;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none;outline:none}
a {outline: none;text-decoration: none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
*,:before,:after{box-sizing:border-box}
html,body{width:100%;height:100%;min-height:100%;position:relative;overflow-x:hidden;}
html,body{width:100%;height:100%;min-height:100%;position:relative;overflow-x:hidden;}
html{line-height:1;background:000;}
/* Reset END */
/* Smooth scrolling for anchor links */
html{scroll-behavior:smooth;}
/* Disable smooth scrolling when users have prefers-reduced-motion enabled */
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* IMPORT FONTS */
@font-face {font-family: 'edo';src: url('fonts/edosz-webfont.ttf') format('truetype'),url('fonts/edosz-webfont.svg#edo_szregular') format('svg');font-weight: normal;font-style: normal;}
/* IMPORT FONTS END */
/*Loader*/
.preloader{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;background:#000;justify-content:center;z-index:99999;}
.preloader-container{display:block;position:relative;width:100%;height:100%;text-align:center;}
.preloader picture{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:600px;}
.preloader picture img{width:100%;height:auto;}
.preloader-logo{width:200px;height:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;}
body{-webkit-backface-visibility:hidden;backface-visibility:hidden; font-family: 'Noto Sans JP', sans-serif; font-weight: 400;font-size:13px;line-height:1.5;background:url(../img/common/bg_html.jpg) left top repeat;background-size: 50% auto;color: #fff; }
html.webp body{background-image:url(../img/common/bg_html.webp);}
a{outline:none;text-decoration:none; color: #fff}
img{vertical-align:middle}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
/*did this body auto height to make fancy box work properly */
body {height: auto;}
.container {width: 100%;height: auto;color: white;position: relative;}
.body-container{margin:0 auto;position:relative;width:100%}
.isHover{transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out}
.isHover:hover{cursor:pointer;opacity:.8}
h5{font-size:18px}
h4{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:20px;letter-spacing:1.5px}
h4.mainTitle{font-family:garamond-premier-pro,serif;font-weight:700;font-size:20px;letter-spacing:1.5px}
h4.sub-text{position:relative;display:inline-block;font-size:30px;text-align:center;padding:30px 30px 0;margin:0 auto;text-shadow:0 0 1px #000,0 0 1px #000, 0 0 3px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 10px #000, 0 0 10px #000;z-index:10;}
h4.sub-text:before{content:'';width:120%;max-width:1080px;aspect-ratio:6.75/1;position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background: url(../img/common/text-brush.png) center bottom no-repeat;background-size: 100% auto;z-index: -1;}
h4.sub-text{position:relative;display:inline-block;font-size:30px;text-align:center;padding:30px 30px 0;margin:0 auto;text-shadow:0 0 1px #000,0 0 1px #000, 0 0 3px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 10px #000, 0 0 10px #000;z-index:10;}
h4.sub-text:before{content:'';width:120%;max-width:1080px;aspect-ratio:6.75/1;position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background: url(../img/common/text-brush.png) center bottom no-repeat;background-size: 100% auto;z-index: -1;}
h3{position:relative;font-family: 'Noto Serif JP', serif;font-size:24px;font-weight:700;line-height:1.25;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;}
h3.mainTitle{font-family:'Noto Sans JP',serif;font-size:20px;font-weight:600;font-style:italic;line-height:1.25}
h2{font-family:'Noto Serif JP',serif;font-weight:700;font-size:30px;color:#ffc900;text-align:center;letter-spacing:1.85px;line-height:1;margin-bottom:40px;position:relative;text-shadow:3px 3px #000;text-transform:uppercase;z-index:1}
h2.section-header{font-family:edo,'Noto Serif JP',sans-serif;font-weight:400;font-size:60px;color:#FFF;letter-spacing:1.85px;line-height:1;margin-bottom:40px;position:relative;z-index:1;text-shadow:0 0 1px #cc0b01, 0 0 2px #cc0b01, 0 0 3px #cc0b01, 0 0 4px #cc0b01, 0 0 5px #cc0b01, 0 0 6px #cc0b01, 0 0 7px #cc0b01, 0 0 10px #cc0b01;}
h1{line-height:1.4;font-family:'Noto Serif JP',serif;font-size:6vw;font-weight:400;letter-spacing:1.85px;text-transform:uppercase;text-shadow:-11px 7px rgba(0,0,0,.55)}
p{font-size:14px}
.font-bold{font-weight:700}
.font-black{font-weight:800}
.italic{font-style:italic}
.section-container{position:relative;display:block;margin:0 auto;width:90%;max-width:1920px;height:100%;}
.button-style{background-color:#ffc900;border:2px solid #000;color:#000;cursor:pointer;display:inline-block;margin:5px;padding:10px 30px;text-transform:uppercase;white-space:nowrap;width:250px}
.container-inline{position:relative;text-align:center;}
.container-inline:before{content:' ';width:0;height:100%;visibility:hidden;display:inline-block;vertical-align:middle}
/* Common Default styles */
.show-mobile{display:block}
.show-desktop{display:none}
#image-loader{display:none;}
.hide-mobile{display:none;}
.clearfloat{clear:both;display:block;height:1px;}
.hide-mobile{display:none;}
.hide-desktop{display:none;}
.character-background{position:absolute;background-size:cover}
.character-background img{width:100%;height:auto;}
@media screen and (min-width: 768px) {
body{font-size:18px}
h3{font-size:24px}
h2{font-size:60px}
h1{font-size:40px}
p{font-size:16px}
body.de .hide-mobile{display:inline-block;}
}
@media screen and (min-width: 1024px){
h2.mainTitle{text-align:left;text-shadow:-5px 5px rgba(0,0,0,.35)}
}
@media screen and (min-width:1366px){
body.fr .hide-mobile{display:inline-block;}
}
@media screen and (min-width:1440px){
h4{font-size:25.25px}
h3{font-size:26px}
h2{font-size:80px}
h2.mainTitle{font-size:60px}
h1{font-size:80px;text-transform:uppercase}
p{font-size:18px}
}
@media screen and (min-width:1920px){
}
/*Nav*/
.navbar{position:absolute;width:100%;background:#000;z-index:999;top:0;left:0;}
.navArea{position:relative;transition:top .3s}
.navContainer{margin:0 auto;width:100%;max-width:2560px;position:relative}
nav{width:100%}
button.hamburger{border:none;display:block;position:absolute;top:0;z-index:30}
nav{background-size:contain;padding-bottom:20px;font-size:0;list-style:none;position:relative;width:100%;z-index:1}
.navBtn h5{text-shadow:0 0 5px #000;text-transform:uppercase;text-align:center;}
.logo{display:block;height:75px;margin:10px auto;}
.hamMenuTitle{color:#FFF;display:block;font-size:26px;font-style:italic;position:absolute;right:65px;text-transform:uppercase;top:50%;transform:translate(0,-50%);z-index:20}
/*See app.js for transitions and changes to hamUL in the navigation portion of the file*/
nav.transition .nav-container{color:#FFF;position:relative;width:100%;max-width:250px;margin:0 auto}
.nav-container div{max-width:250px;margin:0 auto;padding:10px;background-color:transparent;border-bottom:1px solid rgba(255,255,255,.75);display:block;text-align:center;text-transform:uppercase}
.nav-container div:first-child{width:150px;border:none;display:block;margin:0 auto;}
.nav-container div:nth-child(2){border-top:1px solid rgba(255,255,255,.75);}
.nav-container div a{display:inline-block;outline:none;text-decoration:none}
.nav-container div a h5{padding:2% 0}
.purchaseNavBtn,.newsletterNavBtn{text-align:center;width:250px;background-color:#ffc900;border:2px solid #000;color:#000;cursor:pointer;display:block;margin:10px auto;padding:10px;text-transform:uppercase;white-space:nowrap}
#purchaseTopNav{width:250px;display:block;margin:20px auto 0;}
#nav-purchase-desktop{display:none;}
.openNewsletter{display:block;color:#000}
.transition{transition:all 0.5s ease;}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{box-shadow:0px 0px 3px #000;}
/*combined with app.js this allows you to create sticky nav*/
.navStick{position:fixed!important;top:0;left:0;z-index:999;transition: all 3s ease;}
@media screen and (orientation:landscape){
nav.transition .nav-container{max-width:100%;text-align:center;}
.nav-container div{border:none;display:inline-block;margin-right:20px;}
.nav-container div:nth-child(2){border:none;}
}
@media screen and (min-width: 940px) {
.navbar{position:relative;}
button.hamburger,.hamMenuTitle,.ps4MenuLogo,.hamUL > a .social_icon,.navSm{display:none}
nav{padding:0;background:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)}
nav.transition .nav-container{margin:0 auto;width:100%;max-width:2560px;text-align:unset;}
.nav-container div{border:none!important;display:inline-block;margin:0 10px;vertical-align:middle}
.nav-container div:first-child{display:inline-block;}
.logo{display:inline-block;height:65px;margin:0}
.purchaseNavBtn,#purchaseTopNav{display:none}
#nav-purchase-desktop{display:inline-block;}
.newsletterNavBtn{position:absolute;right:70px;top:50%;transform:translateY(-50%);margin:0}
}
/*END NAV*/
/* Coutnry Selector */
#language-selection-wrapper {position:absolute;top:25px;right:0;text-align:right;}
#language-selection-icon {cursor:pointer;margin-right:20px;}
#language-selection-icon img {border-radius:50%;width:35px;height:auto;}
#language-dropdown {text-align:left;padding:20px;font-size:16px;background:rgba(0,0,0,0.5);}
#language-dropdown div{padding:5px;}
#language-dropdown div a{padding:5px;transition:all 0.25s ease;}
#language-dropdown div a:hover{opacity:0.5;}
/* END Country Selector */
/* Hero */
.hero{position:relative;width:100%;height:80vh;min-height:800px;}
.hero:before{background:rgba(0,0,0,0.55);content:'';width:100%;height:100%;position:absolute;top:0;left:0;}
.hero-bg{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%;z-index:-1}
.hero-img{height:100%;left:-2%;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%;z-index:-1}
.hero-esrb{bottom:35px;height:90px;left:10px;margin:0 auto;position:absolute;display:none;}
body.en .hero-esrb{display:block;}
.hero-esrb-img{height:100%}
.hero-content{left:50%;top:50%;position:absolute;text-align:center;transform:translate(-50%,-50%);width:100%;max-width:1280px;height:80%;}
.hero-content img{width:100%}
.hero-cta{position:absolute;bottom:40px;width:100%}
.hero-cta .yellow-text{color:#fef45d;text-shadow: 0px 0px 5px #d63c34, 0px 0px 5px #d63c34, 0px 0px 5px #d63c34, 0px 0px 4px #d63c34, 0px 0px 3px #d63c34, 0px 0px 2px #d63c34;}
.hero-content h4{margin:8px auto;font-size:36px;text-shadow:0 0 10px #000;text-transform:uppercase;line-height:45px}
.hero-btn-container .button-style{width:275px;}
body.fr .hero-btn-container .button-style{width:350px;}
.hero-btn-outline{background-color:rgba(0,0,0,.5);color:#FFF;text-shadow:0 0 5px #000}
@media screen and (min-width:768px){
.hero-content{width:75%;}
.hero-content h4{font-size:48px;}
.hero-content img{width:80%;}
.hero-date .hidden-break{display:none;}
}
@media screen and (min-width:940px){
.hero-esrb{bottom:50px;}
}
@media screen and (min-width:1024px){
.hero-content img{width:75%;}
}
@media screen and (min-width:1280px){
.hero-content img{width:65%}
}
@media screen and (min-width:1440px){
.hero-content img{width:60%;}
}
/* END Hero */
/* MEDIA */
.media{position:relative;width:100%;padding-bottom:100px;background:url(../img/media/media-main-bg.jpg) center no-repeat;background-size:cover;}
.media #media-title-wrapper{position:relative;margin-bottom:100px;}
.media .section-header{position: relative;text-align: left;width: 85%;max-width: 1280px;margin: 0 auto;z-index:7;}
.media #media-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.media #media-title-bg2{position:absolute;width:200vw;max-width:1920px;aspect-ratio:12.8/1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;}
.media .section-container{margin-top:100px;}
.media-text{position:relative;display:block;margin:0 auto 20px;max-width:1024px;color:#000;font-weight:700;text-align:center;text-transform:uppercase;z-index:1;text-shadow:0 0 2px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 15px #FFF,0 0 20px #FFF}
.trailerContainer {margin:0 auto;max-width:1200px;position:relative;text-align:center;}
.trailerMain{position:relative;margin-bottom:40px;}
.trailerMain a img {width:100%;max-width:1280px;border:2px solid #c4611e;}
.playButton {left:50%;opacity:0.75;position:absolute;top:50%;transform:translate(-50%, -50%);width:50px!important;outline:none!important;border:none!important;}
.media-slider{margin:0 auto;max-width:1920px;width:100%;position:relative;text-align:center;}
.trailerNext,.trailerPrev{cursor:pointer;position:absolute;top:50%;transform:translate(0,-50%);width:50px}
.playTrailer{border:3px solid #f4d034;max-width:600px;width:100%}
.trailerCarousel{position:relative;width:95%;margin:0 auto;}
.trailerCarousel{position:relative;width:95%;margin:0 auto;}
.trailerThumb{position:relative;}
.trailerNext{right:-25px;z-index:5;}
.trailerPrev{left:-25px;z-index:5}
.mediaImg{width:100%}
.carousel-video{height:auto;-o-object-fit:cover;object-fit:cover;width:100%}
.media-carousel-slides{position:relative;width:83%;margin:0 auto}
.play-button{opacity:.75;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px}
.esrbTrailer{height:72px;position:absolute;bottom:15px;right:15px}
@media screen and (min-width:900px) {
.trailerNext{right:-50px;}
.trailerPrev{left:-50px;}
.trailerContainer{width:80%}
}
@media screen and (min-width:1024px){
.media{padding-bottom:150px}
.media-title .hidden-break{display:none;}
.media .section-header{font-size:96px;}
.trailer-next{right:-23px}
.trailer-prev{left:-23px}
}
/* END MEDIA */
/* STORY */
.story{position:relative;width:100%;text-align:center;padding-bottom:100px;}
.story .section-container{max-width:1080px;margin-bottom:75px;}
.story #story-title-wrapper{position:relative;margin-bottom:100px;}
.story .story-title{position: relative;text-align:right;width:85%;max-width:1280px;margin:0 auto;z-index:7;}
.story #story-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.story #story-title-bg2{position:absolute;width:150vw;max-width:1920px;aspect-ratio:5.6/1;left:50%;top:-5%;transform:translate(-50%,-50%);z-index:6;}
.story:before{background:rgba(0,0,0,0.55);content:'';width:100%;height:100%;position:absolute;top:0;left:0;}
.story-bg{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;left:0;z-index:-1}
.story #story-bg-deco{position:absolute;width:150%;min-width:1453px;left:50%;top:-20%;transform:translateX(-50%);z-index:1;}
#story-subheader{position:relative;z-index:10;}
#story-text-1{position:relative;z-index:10;}
#story-text-2{position:relative;z-index:10;}
#story-text-3{position:relative;z-index:10;}
@media screen and (min-width:1024px){
.story{padding-bottom:125px;}
.story .section-container{margin-bottom:60px;}
.story #story-title-wrapper{margin-bottom:125px;}
.story .story-title{font-size:96px;}
}
/* END STORY */
/* CHARACTERS */
html.webp .characters{background-image:url(../img/characters/character_main_bg_sm.webp);}
.characters{position:relative;padding:0 0 5vw;text-align:center;background:url(../img/characters/character_main_bg_sm.jpg) center no-repeat;background-size:100% 100%;}
.characters #character-bg-deco{position:absolute;width:1775px;height:1060px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;}
.character-title-wrapper{position:relative;margin-bottom:60px;}
.character-title{position:relative;text-align:left;width:85%;max-width:1280px;margin:0 auto;z-index:5;}
.character-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
.character-title-bg2{position:absolute;width:150vw;max-width:1920px;aspect-ratio:7/1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
html.webp .characters .character-header-text:before{background-image: url(../img/common/text-brush.png)!important;}
.characters .character-header-text:before{content:'';width:120%;max-width:1080px;aspect-ratio:6.75/1;position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background: url(../img/common/text-brush.png) center bottom no-repeat;background-size: 100% auto;z-index: -1;}
.characters .character-header-text{display:inline-block;margin:0 auto 20px;position:relative;max-width:1024px;z-index:10}
.characters .character-subheader-text{position:relative;width:80%;margin:0 auto 20px;font-size:14px;font-weight:400;line-height:1.25;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;z-index:10;}
.characters-container{position:relative;max-width:1280px;margin:0 auto;z-index:10;}
.characters-container img{width:100%;}
.gtm__chara-btn{display:inline-block;border:2px solid #000;margin:40px 10px 15px;position:relative;z-index:10;}
html.webp .gtm__character{background-image:url(../img/common/button_bg.webp)!important;}
.gtm__character{display:inline-block;margin:5px;padding:10px 25px;text-transform:uppercase;background:url(../img/common/button_bg.jpg) left top repeat-x;background-size:auto 100%;text-align:center;}
html.webp .gtm__character{background-image:url(../img/common/button_bg.webp)!important;}
.gtm__character{display:inline-block;margin:5px;padding:10px 25px;text-transform:uppercase;background:url(../img/common/button_bg.jpg) left top repeat-x;background-size:auto 100%;text-align:center;}
.gtm__character p#chara-btn-text{display:inline-block;font-size:18px;vertical-align:middle;}
.gtm__character img{height:100%;width:auto;margin-left:20px;display:inline-block;vertical-align:middle;text-align:right;}
html.webp #character-fancybox:before{background-image:url(../img/common/location_bg.webp)!important;}
#character-fancybox:before{content:'';width:100%;height:100%;background:url(../img/common/location_bg.jpg) center top no-repeat;background-size:cover;background-attachment:fixed;position:absolute;top:0;right:0;z-index:-1;}
#character-fancybox{width:100%;position:relative;text-align:center;position:relative;padding:50px 0 75px;display:none;}
.char-header h3{margin-bottom:45px;font-size:16px;}
#tosa .char-header h3:before{height:150px;width:150px;content:'';background:url(../img/characters/tosa/people_of_tosa_header.png) center no-repeat;background-size:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;}
.char-thumb{position:relative;width:90%;margin: 0 auto; display:grid;grid-template-columns: 1fr 1fr;grid-gap:15px 10px;z-index:50;}
.char-thumb img{width:100%;max-width:600px}
.char-thumb picture img{cursor:pointer;transition: all .2s ease-in-out;}
.char-thumb picture img:hover{transform:scale(1.05);}
.char-wrapper:before{position:absolute;height:105%;width:100vw;content:"";background:url(../img/characters/tosa/char-bg.png) top center no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#tosa{margin-top:100px;}
#tosa .char-thumb{grid-template-areas: "sakamoto takechi" "yoshida okada" "nakaoka";}
#tosa #sakamoto img{grid-area:sakamoto;}
#tosa #takechi img{grid-area:takechi;}
#tosa #yoshida img{grid-area:yoshida;}
#tosa #okada img{grid-area:okada;}
#tosa #nakaoka img{grid-area:nakaoka;}
#tosa .char-wrapper:before{background-image:url(../img/characters/tosa/char-bg.png);}
#shinsengumi{margin-top:150px;}
#shinsengumi .char-header h3:before{height:150px;width:150px;content:'';background:url(../img/characters/shinsengumi/shinsengumi_header.png) center no-repeat;background-size:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;}
#shinsengumi .char-thumb{grid-template-areas: "kondo hijikata" "ito okata" "nagakura saito" "matsubara takeda" "inoue tani" "todo suzuki" "harada yamazaki"}
#shinsengumi #kondo img{grid-area:kondo;}
#shinsengumi #hijikata img{grid-area:hijikata;}
#shinsengumi #ito img{grid-area:ito;}
#shinsengumi #okata img{grid-area:okata;}
#shinsengumi #nagakura img{grid-area:nagakura;}
#shinsengumi #saito img{grid-area:saito;}
#shinsengumi #matsubara img{grid-area:matsubara;}
#shinsengumi #takeda img{grid-area:takeda;}
#shinsengumi #inoue img{grid-area:inoue;}
#shinsengumi #tani img{grid-area:tani;}
#shinsengumi #todo img{grid-area:todo;}
#shinsengumi #suzuki img{grid-area:suzuki}
#shinsengumi #harada img{grid-area:harada;}
#shinsengumi #yamazaki img{grid-area:yamazaki;}
#shinsengumi .char-wrapper:before{background-image:url(../img/characters/shinsengumi/character-image-bg.png);}
#key-figures{margin-top:150px;}
#key-figures .char-header h3:before{height:150px;width:150px;content:'';background:url(../img/characters/key/key_characters_header.png) center no-repeat;background-size:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;}
#key-figures .char-thumb{grid-template-areas: "saigo niibori" "oryo informant" "otose ikumatsu"}
#key-figures #saigo img{grid-area:saigo;}
#key-figures #niibori img{grid-area:niibori;}
#key-figures #oryo img{grid-area:oryo;}
#key-figures #informant img{grid-area:informant;}
#key-figures #otose img{grid-area:otose;}
#key-figures #ikumatsu img{grid-area:ikumatsu;}
#key-figures .char-wrapper:before{background-image:url(../img/characters/key/character-image-bg.png);}
#bakufu{margin-top:150px;}
#bakufu .char-header h3:before{height:150px;width:150px;content:'';background:url(../img/characters/bakufu/members_of_the_bakufu_header.png) center no-repeat;background-size:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;}
#bakufu .char-thumb{grid-template-areas: "tokugawa sasaki" "katsu"}
#bakufu #tokugawa img{grid-area:tokugawa;}
#bakufu #sasaki img{grid-area:sasaki;}
#bakufu #katsu img{grid-area:katsu;}
#bakufu .char-wrapper:before{background-image:url(../img/characters/bakufu/character-image-bg.png);}
.fancybox-slide--html{padding:0;}
.fancybox-slide{width:100vw;}
.character-container-fancybox .fancybox-close-small{position:fixed;background:rgba(0,0,0,.55);display:none;}
.char-wrapper{width:90%;margin:40px auto 60px;padding-bottom:40px;text-align:left;position:relative;max-width:1080px;}
.char-wrapper img{width:100%;height:auto;}
.character-image{position:relative;width:100%;margin-bottom:20px;}
.character-name-image{position:relative;width:30%;z-index:10;}
.character-main-image{position:absolute;top:-8%;right:-15%;width:100%;z-index:10;}
.character-crest-image{position:absolute;top:8%;left:4%;width:67%;z-index:9;}
.character-text{position:relative;width:100%;padding:0px 10px;z-index:10}
.character-description-text{font-size:18px;}
.character-name-text{font-size:36px;line-height:1.25}
.character-title-text{font-size:16px;}
.character-info-text{margin-top:20px;font-size:12px;}
@media screen and (min-width:641px){
html.webp .characters{background-image:url(../img/characters/character_main_bg_md.webp);}
.characters{background-image:url(../img/characters/character_main_bg_md.jpg);}
}
@media screen and (min-width: 1024px){
.characters .character-title,#character-fancybox .character-title{margin:0 auto 80px;font-size:96px;}
.characters .character-header-text{font-size:36px;}
.characters .character-subheader-text{font-size:24px;margin:40px auto 20px;}
.char-thumb{width:960px;grid-template-columns: 1fr 1fr 1fr;}
#tosa{margin-top:200px;}
#tosa .char-thumb{grid-template-areas: "sakamoto takechi yoshida" "okada nakaoka"}
#shinsengumi .char-thumb{grid-template-areas: "kondo hijikata ito" "okata nagakura saito" "matsubara takeda inoue" "tani todo suzuki" "harada yamazaki"}
#key-figures .char-thumb{grid-template-areas: "saigo niibori oryo" "informant otose ikumatsu"}
#bakufu .char-thumb{grid-template-areas: "tokugawa sasaki katsu"}
#character-fancybox{overflow-x:hidden;overflow-y:auto;}
.char-wrapper .character-contents{padding:40px 0;}
.character-name-image{width:235px;}
.character-main-image{width:635px;left:110px;top:-80px;}
.character-crest-image{width:543px;left:-100px}
.character-text{position:absolute;top:50px;left:610px;width:570px;}
.character-description-text{font-size:24px;}
.character-name-text{font-size:46px;}
.character-title-text{font-size:20px;}
.character-info-text{font-size:18px;}
}
@media screen and (min-width:1281px){
html.webp .characters{background-image:url(../img/characters/character_main_bg.webp);}
.characters{background-image:url(../img/characters/character_main_bg.jpg);}
}
/* END CHARACTERS */
/* COMBAT */
html.webp .combat{background-image:url(../img/combat/combat_bg_sp.webp)!important;}
.combat{position:relative;color:#FFF;text-shadow:#000 0 0 1px,#000 0 0 3px,#000 0 0 5px;text-align:center;background:url(../img/combat/combat_bg_sp.jpg) top left no-repeat;background-size:100% 100%;padding-bottom:10vw;z-index:5;}
.combat p{text-shadow:0 0 1px #000,0 0 2px #000,0 0 3px #000,0 0 4px #000,0 0 5px #000,0 0 6px #000,0 0 7px #000,0 0 10px #000!important;}
.combat .section-container{width:95%;max-width:1280px;display:grid;}
html.webp .combat .combat-header-text:before{background-image: url(../img/common/text-brush.png)!important;}
.combat .combat-header-text:before{content:'';width:120%;max-width:1080px;aspect-ratio:6.75/1;position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background: url(../img/common/text-brush.png) center bottom no-repeat;background-size: 100% auto;z-index: -1;}
.combat .combat-header-text{display:inline-block;margin:0 auto 20px;position:relative;max-width:1024px;z-index:10}
.combat .combat-subheader-text{position:relative;width:80%;margin:0 auto 50px;font-size:14px;font-weight:400;line-height:1.25;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;z-index:10;}
.combat img{width:100%;height:auto;border:1px solid #f4d034;position:relative;z-index:2;}
.combat #combat-title-wrapper{position:relative;margin-bottom:75px;}
.combat .combat-title{position: relative;text-align:right;width:85%;max-width:1280px;margin:0 auto;z-index:7;}
.combat #combat-title-bg1{border:none;position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.combat #combat-title-bg2{border:none;position:absolute;width:150vw;max-width:1920px;aspect-ratio:5.6/1;left:50%;top:-5%;transform:translate(-50%,-50%);z-index:6;}
html.webp .combat-text-container:before{background-image:url(../img/combat/battle_text_bg.webp)!important;}
.combat-text-background{position:relative;}
.combat-text-background:before{content:'';width:125%;height:175%;position:absolute;top:50%;left:45%;transform:translate(-50%,-50%);background:url(../img/combat/battle_text_bg.png) center center no-repeat;background-size:100% 100%;z-index:-1}
.combat-text-container{position:relative;text-align:left;width:100%;max-width:360px;min-height:150px;margin:-36px 0 80px 0;z-index:5;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;}
html.webp .combat{background-image:url(../img/combat/combat_bg_sp.webp)!important;}
.combat{position:relative;color:#FFF;text-shadow:#000 0 0 1px,#000 0 0 3px,#000 0 0 5px;text-align:center;background:url(../img/combat/combat_bg_sp.jpg) top left no-repeat;background-size:100% 100%;padding-bottom:10vw;z-index:5;}
.combat p{text-shadow:0 0 1px #000,0 0 2px #000,0 0 3px #000,0 0 4px #000,0 0 5px #000,0 0 6px #000,0 0 7px #000,0 0 10px #000!important;}
.combat .section-container{width:95%;max-width:1280px;display:grid;}
html.webp .combat .combat-header-text:before{background-image: url(../img/common/text-brush.png)!important;}
.combat .combat-header-text:before{content:'';width:120%;max-width:1080px;aspect-ratio:6.75/1;position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background: url(../img/common/text-brush.png) center bottom no-repeat;background-size: 100% auto;z-index: -1;}
.combat .combat-header-text{display:inline-block;margin:0 auto 20px;position:relative;max-width:1024px;z-index:10}
.combat .combat-subheader-text{position:relative;width:80%;margin:0 auto 50px;font-size:14px;font-weight:400;line-height:1.25;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;z-index:10;}
.combat img{width:100%;height:auto;border:1px solid #f4d034;position:relative;z-index:2;}
.combat #combat-title-wrapper{position:relative;margin-bottom:75px;}
.combat .combat-title{position: relative;text-align:right;width:85%;max-width:1280px;margin:0 auto;z-index:7;}
.combat #combat-title-bg1{border:none;position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.combat #combat-title-bg2{border:none;position:absolute;width:150vw;max-width:1920px;aspect-ratio:5.6/1;left:50%;top:-5%;transform:translate(-50%,-50%);z-index:6;}
html.webp .combat-text-container:before{background-image:url(../img/combat/battle_text_bg.webp)!important;}
.combat-text-background{position:relative;}
.combat-text-background:before{content:'';width:125%;height:175%;position:absolute;top:50%;left:45%;transform:translate(-50%,-50%);background:url(../img/combat/battle_text_bg.png) center center no-repeat;background-size:100% 100%;z-index:-1}
.combat-text-container{position:relative;text-align:left;width:100%;max-width:360px;min-height:150px;margin:-36px 0 80px 0;z-index:5;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;}
.combat-text-container h3{font-size:36px;}
#swordsman,#gunman,#dancer,#brawler{position:relative;width:95%;margin:0 auto;}
#swordsman:before{content:"";position:absolute;width:100vw;aspect-ratio:1.07/1;background:url(../img/combat/sword_bg_sp.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#gunman:before{content:"";position:absolute;width:100vw;aspect-ratio:1.27/1;background:url(../img/combat/gun_bg_sp.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#dancer:before{content:"";position:absolute;width:100vw;aspect-ratio:1/1.28;background:url(../img/combat/dancer_bg_sp.png) left top no-repeat;background-size:100% 100%;top:30%;left:50%;transform:translate(-50%,-50%);}
#brawler:before{content:"";position:absolute;width:100vw;aspect-ratio:1.14/1;background:url(../img/combat/brawler_bg_sp.png) left top no-repeat;background-size:100% 100%;top:70%;left:50%;transform:translate(-50%,-50%);}
.image-background{position:relative;}
.image-background:before{content:"";width:102%;height:105%;position:absolute;top:0;left:50%;transform:translateX(-50%);background:url(../img/combat/combat_img_bg.png) center no-repeat;background-size:100% 100%;z-index:1;}
#gunman .image-background:before,#brawler .image-background:before{transform:translateX(-50%) scaleX(-1);}
#gunman-text,#brawler-text{justify-self:end;}
@media screen and (min-width:1024px){
html.webp .combat{background-image:url(../img/combat/combat_bg_pc.webp)!important;}
.combat{background-image:url(../img/combat/combat_bg_pc.jpg);}
.combat #combat-title-wrapper{margin-bottom:100px;}
.combat .combat-title {font-size:96px;}
.combat .combat-header-text{font-size:36px;}
.combat .combat-subheader-text{font-size:24px;margin:40px auto 3vw;}
.combat-text-container h3{font-size:60px;}
.combat p{font-size:20px;}
.combat .section-container{grid-template-columns:repeat(2, 1fr);grid-auto-columns: 1fr;grid-auto-rows:auto;row-gap:100px;}
#swordsman{grid-area:swordsman;grid-column:1/4;width:100%;}
#swordsman-text{grid-area:swordsmantext;grid-column:3/5;align-self:center;max-width:none;width:75%;justify-self:end;margin:0}
#swordsman,#swordsman-text{grid-row:1/2}
#gunman{grid-area:gunman;grid-row:2;grid-column:2/5;width:100%;}
#gunman-text{grid-area:gunmantext;grid-row:2;grid-column:1/3;max-width:none;width:75%;align-self:center;justify-self:start;margin:0;}
#gunman,#gunman-text{grid-row: 2 / 3;}
#dancer{grid-area:dancer;grid-row:3;grid-column:1/4;width:100%;}
#dancer-text{grid-area:dancertext;grid-row:3;grid-column:3/5;align-self:center;max-width:none;width:75%;justify-self:end;margin:0;}
#brawler{grid-area:brawler;grid-row:4;grid-column:2/5;width:100%;}
#brawler-text{grid-area:brawlertext;grid-row:4;grid-column:1/3;align-self:center;max-width:none;width:75%;justify-self:start;margin:0;}
#swordsman:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.53/1;background:url(../img/combat/sword_bg_pc.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-25%,-50%);}
#gunman:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.54/1;background:url(../img/combat/gun_bg_pc.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-75%,-50%);}
#dancer:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.24/1;background:url(../img/combat/dancer_bg_pc.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#brawler:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.39/1;background:url(../img/combat/brawler_bg_pc.png) left top no-repeat;background-size:100% 100%;top:75%;left:50%;transform:translate(-75%,-50%);}
}
#swordsman,#gunman,#dancer,#brawler{position:relative;width:95%;margin:0 auto;}
#swordsman:before{content:"";position:absolute;width:100vw;aspect-ratio:1.07/1;background:url(../img/combat/sword_bg_sp.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#gunman:before{content:"";position:absolute;width:100vw;aspect-ratio:1.27/1;background:url(../img/combat/gun_bg_sp.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#dancer:before{content:"";position:absolute;width:100vw;aspect-ratio:1/1.28;background:url(../img/combat/dancer_bg_sp.png) left top no-repeat;background-size:100% 100%;top:30%;left:50%;transform:translate(-50%,-50%);}
#brawler:before{content:"";position:absolute;width:100vw;aspect-ratio:1.14/1;background:url(../img/combat/brawler_bg_sp.png) left top no-repeat;background-size:100% 100%;top:70%;left:50%;transform:translate(-50%,-50%);}
.image-background{position:relative;}
.image-background:before{content:"";width:102%;height:105%;position:absolute;top:0;left:50%;transform:translateX(-50%);background:url(../img/combat/combat_img_bg.png) center no-repeat;background-size:100% 100%;z-index:1;}
#gunman .image-background:before,#brawler .image-background:before{transform:translateX(-50%) scaleX(-1);}
#gunman-text,#brawler-text{justify-self:end;}
@media screen and (min-width:1024px){
html.webp .combat{background-image:url(../img/combat/combat_bg_pc.webp)!important;}
.combat{background-image:url(../img/combat/combat_bg_pc.jpg);}
.combat #combat-title-wrapper{margin-bottom:100px;}
.combat .combat-title {font-size:96px;}
.combat .combat-header-text{font-size:36px;}
.combat .combat-subheader-text{font-size:24px;margin:40px auto 3vw;}
.combat-text-container h3{font-size:60px;}
.combat p{font-size:20px;}
.combat .section-container{grid-template-columns:repeat(2, 1fr);grid-auto-columns: 1fr;grid-auto-rows:auto;row-gap:100px;}
#swordsman{grid-area:swordsman;grid-column:1/4;width:100%;}
#swordsman-text{grid-area:swordsmantext;grid-column:3/5;align-self:center;max-width:none;width:75%;justify-self:end;margin:0}
#swordsman,#swordsman-text{grid-row:1/2}
#gunman{grid-area:gunman;grid-row:2;grid-column:2/5;width:100%;}
#gunman-text{grid-area:gunmantext;grid-row:2;grid-column:1/3;max-width:none;width:75%;align-self:center;justify-self:start;margin:0;}
#gunman,#gunman-text{grid-row: 2 / 3;}
#dancer{grid-area:dancer;grid-row:3;grid-column:1/4;width:100%;}
#dancer-text{grid-area:dancertext;grid-row:3;grid-column:3/5;align-self:center;max-width:none;width:75%;justify-self:end;margin:0;}
#brawler{grid-area:brawler;grid-row:4;grid-column:2/5;width:100%;}
#brawler-text{grid-area:brawlertext;grid-row:4;grid-column:1/3;align-self:center;max-width:none;width:75%;justify-self:start;margin:0;}
#swordsman:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.53/1;background:url(../img/combat/sword_bg_pc.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-25%,-50%);}
#gunman:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.54/1;background:url(../img/combat/gun_bg_pc.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-75%,-50%);}
#dancer:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.24/1;background:url(../img/combat/dancer_bg_pc.png) left top no-repeat;background-size:100% 100%;top:50%;left:50%;transform:translate(-50%,-50%);}
#brawler:before{content:"";position:absolute;width:100vw;max-width:1600px;aspect-ratio:1.39/1;background:url(../img/combat/brawler_bg_pc.png) left top no-repeat;background-size:100% 100%;top:75%;left:50%;transform:translate(-75%,-50%);}
}
/* END COMBAT */
/* LOCATIONS */
.locations{text-align:center;clear:both;position:relative;padding-bottom:100px;z-index:5;padding-bottom:100px;z-index:5;}
.locations:before{content:"";height:100%;width:100%;position:absolute;top:0;left:0;background:url(../img/common/location_bg.jpg) center top no-repeat; background-size:cover;z-index:-1}
.locations h3{position:relative;text-align:center;font-size:64px;text-shadow:0 0 1px #000,0 0 1px #000, 0 0 3px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 10px #000, 0 0 10px #000;z-index:10z-index:10}
.location-text{text-align:left;}
.location-title-wrapper{position:relative;margin-bottom:60px;}
.location-title{position:relative;text-align:left;width:85%;max-width:1280px;margin:0 auto;z-index:5;}
.location-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
.location-title-bg2{position:absolute;width:150vw;max-width:1920px;aspect-ratio:7/1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
.location-title-wrapper{position:relative;margin-bottom:60px;}
.location-title{position:relative;text-align:left;width:85%;max-width:1280px;margin:0 auto;z-index:5;}
.location-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
.location-title-bg2{position:absolute;width:150vw;max-width:1920px;aspect-ratio:7/1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
#kyo-wrapper{position:relative;padding-top:5%;}
#tosa-text-wrapper{position:relative;}
#kyo-location-background{position:absolute;height:100%;width:100%;top:0;left:0;}
html.webp #kyo-location-background:before{background-image:url(../img/locations/kyo_bg.webp)!important;}
#kyo-location-background:before{content:'';width:75vw;min-width:700px;aspect-ratio:1/1.04;background:url(../img/locations/kyo_bg.png) right top no-repeat;background-size:100% auto;position:absolute;top:-35%;left:5%;z-index:-1;}
.kyo-slider,.tosa-slider{margin:0 auto;max-width:1920px;width:100%;position:relative;text-align:center;z-index:10}
#tosa-text-wrapper{position:relative;}
#kyo-location-background{position:absolute;height:100%;width:100%;top:0;left:0;}
html.webp #kyo-location-background:before{background-image:url(../img/locations/kyo_bg.webp)!important;}
#kyo-location-background:before{content:'';width:75vw;min-width:700px;aspect-ratio:1/1.04;background:url(../img/locations/kyo_bg.png) right top no-repeat;background-size:100% auto;position:absolute;top:-35%;left:5%;z-index:-1;}
.kyo-slider,.tosa-slider{margin:0 auto;max-width:1920px;width:100%;position:relative;text-align:center;z-index:10}
#tosa-wrapper{position:relative;}
#tosa-text-wrapper{position:relative;}
#tosa-location-background{position:absolute;height:100%;width:100%;top:0;left:0;}
html.webp #tosa-location-background:before{background-image:url(../img/locations/tosa_bg.webp)!important;}
#tosa-location-background:before{content:'';width:clamp(440px,60vw,1100px);aspect-ratio:1.175/1;background:url(../img/locations/kyo_bg.png) left bottom no-repeat;background-size:100% auto;position:absolute;top:-45%;right:25%;z-index:0}
#tosa-text-wrapper{position:relative;}
#tosa-location-background{position:absolute;height:100%;width:100%;top:0;left:0;}
html.webp #tosa-location-background:before{background-image:url(../img/locations/tosa_bg.webp)!important;}
#tosa-location-background:before{content:'';width:clamp(440px,60vw,1100px);aspect-ratio:1.175/1;background:url(../img/locations/kyo_bg.png) left bottom no-repeat;background-size:100% auto;position:absolute;top:-45%;right:25%;z-index:0}
.kyo-slider{margin-bottom:100px;}
html.webp .kyo-slider:before,html.webp .tosa-slider:before{background-image:url(../img/locations/locations_slider_bg.webp)!important;}
.kyo-slider:before,.tosa-slider:before{content:'';width:100vw;height:107%;background:url(../img/locations/locations_slider_bg.png) left top no-repeat;background-size:100% 100%;position:absolute;left:50%;top:-3%;transform:translateX(-50%);}
.kyoContainer,.tosaContainer {margin:0 auto;width:calc(100% - 100px);position:relative;text-align:center;}
.kyoCarousel,.tosaCarousel{width:95%;margin:0 auto;}
.kyoThumb,.tosaThumb{border:3px solid #f4d034;max-width:600px;width:100%}
.kyoNext,.kyoPrev,.tosaNext,.tosaPrev{cursor:pointer;position:absolute;top:50%;transform:translate(0,-50%);width:50px;z-index:10;}
.kyoNext,.kyoPrev,.tosaNext,.tosaPrev{cursor:pointer;position:absolute;top:50%;transform:translate(0,-50%);width:50px;z-index:10;}
.kyoNext,.tosaNext{right:-50px}
.kyoPrev,.tosaPrev{left:-50px}
#tosa-siema{display:grid;grid-template-columns: repeat(3, 1fr);}
#tosa-siema{display:grid;grid-template-columns: repeat(3, 1fr);}
.fancybox-image{border:3px solid #f4d034;}
html.webp .location-text{background-image:url(../img/locations/location-text-bg.webp)!important;}
.location-text{width:80%;max-width:750px;margin:40px auto;padding:60px 50px;background:url(../img/locations/location-text-bg.png) center center no-repeat;background-size:100% 100%;position:relative;z-index:10;position:relative;z-index:10;}
@media screen and (min-width: 640px){
#kyo-wrapper:before{width:50%;}
#kyo-location-background:before{left:30%}
#tosa-wrapper:before{width:75%;bottom:20%}
#tosa-location-background:before{top:-70%;right:55%;}
}
@media screen and (min-width:768px){
.tosaNext,.tosaPrev{display:none;}
#tosa-location-background:before{top:-70%;right:55%;}
}
@media screen and (min-width:768px){
.tosaNext,.tosaPrev{display:none;}
}
@media screen and (min-width: 960px){
#tosa-wrapper:before{width:60%;bottom:20%;}
#tosa-location-background:before{top:-65%;right:50%;}
#kyo-location-background:before{top:-35%;left:35%}
}
@media screen and (min-width:1024px){
.locations .location-title{margin:0 auto 80px;font-size:96px;}
.locations .location-header-text{font-size:36px;}
.locations .location-subheader-text{font-size:24px;margin:40px auto 20px;}
#tosa-location-background:before{top:-70%;right:50%;}
#tosa-location-background:before{top:-65%;right:50%;}
#kyo-location-background:before{top:-35%;left:35%}
}
@media screen and (min-width:1024px){
.locations .location-title{margin:0 auto 80px;font-size:96px;}
.locations .location-header-text{font-size:36px;}
.locations .location-subheader-text{font-size:24px;margin:40px auto 20px;}
#tosa-location-background:before{top:-70%;right:50%;}
}
@media screen and (min-width: 1280px){
#kyo-wrapper:before{width:45%;max-width:750px;min-height:1200px;}
#kyo-location-background:before{top:-45%;left:45%;}
#kyo-location-background:before{top:-45%;left:45%;}
#tosa-wrapper:before{width:50%;bottom:15%;}
#tosa-location-background:before{top:-85%;right:50%;}
#tosa-location-background:before{top:-85%;right:50%;}
}
/* LOCATIONS END */
/* Purchase */
.purchase{text-align:center;position:relative;z-index:5;}
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg_md.webp)!important;}
.purchase:before{content:"";width:120%;height:120%;position:absolute;top:0;left:50%;transform:translateX(-50%);background:url(../img/purchase/purchase_bg_sm.jpg) center;background-size:cover;z-index:-1}
.purchase #purchase-title-wrapper{position:relative;margin-bottom:80px;}
.purchase .purchase-title {position:relative;text-align:right;width:100%;max-width:1280px;margin:0 auto;z-index:7;}
body.it .purchase .purchase-title{letter-spacing:0.25px;}
.purchase #purchase-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.purchase{text-align:center;position:relative;z-index:5;}
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg_md.webp)!important;}
.purchase:before{content:"";width:120%;height:120%;position:absolute;top:0;left:50%;transform:translateX(-50%);background:url(../img/purchase/purchase_bg_sm.jpg) center;background-size:cover;z-index:-1}
.purchase #purchase-title-wrapper{position:relative;margin-bottom:80px;}
.purchase .purchase-title {position:relative;text-align:right;width:100%;max-width:1280px;margin:0 auto;z-index:7;}
body.it .purchase .purchase-title{letter-spacing:0.25px;}
.purchase #purchase-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.purchase h2.section-header{font-size:60px;color:#FFF;text-shadow:0 0 1px #cc0b01, 0 0 2px #cc0b01, 0 0 3px #cc0b01, 0 0 4px #cc0b01, 0 0 5px #cc0b01, 0 0 6px #cc0b01, 0 0 7px #cc0b01, 0 0 10px #cc0b01;}
.purchase h3.version-title,.purchase h3.platform-title,.purchase h3.retail-title{font-size:24px;color:#f4d034;text-shadow:0 0 1px #cc0b01, 0 0 2px #cc0b01, 0 0 3px #cc0b01, 0 0 4px #cc0b01, 0 0 5px #cc0b01, 0 0 6px #cc0b01, 0 0 7px #cc0b01, 0 0 10px #cc0b01;font-weight:700;text-transform:uppercase;}
.purchase h3.version-title,.purchase h3.platform-title,.purchase h3.retail-title{font-size:24px;color:#f4d034;text-shadow:0 0 1px #cc0b01, 0 0 2px #cc0b01, 0 0 3px #cc0b01, 0 0 4px #cc0b01, 0 0 5px #cc0b01, 0 0 6px #cc0b01, 0 0 7px #cc0b01, 0 0 10px #cc0b01;font-weight:700;text-transform:uppercase;}
.purchase h5{font-size:16px;}
#keyart{margin-bottom:40px;}
#cover-art{width:80%;max-width:1080px;border:solid 2px #f4d034;box-shadow:0 0 1px #cc0b01, 0 0 2px #cc0b01, 0 0 3px #cc0b01, 0 0 4px #cc0b01, 0 0 5px #cc0b01, 0 0 6px #cc0b01, 0 0 7px #cc0b01, 0 0 10px #cc0b01;}
.gtm__purchase,button.gtm__platform{display:inline-block;border:2px solid #000;margin:0 10px 15px;}
html.webp button.gtm__platform,button.gtm__platform{width:auto;padding:0;background:none!important;cursor:pointer;}
#keyart{margin-bottom:40px;}
#cover-art{width:80%;max-width:1080px;border:solid 2px #f4d034;box-shadow:0 0 1px #cc0b01, 0 0 2px #cc0b01, 0 0 3px #cc0b01, 0 0 4px #cc0b01, 0 0 5px #cc0b01, 0 0 6px #cc0b01, 0 0 7px #cc0b01, 0 0 10px #cc0b01;}
.gtm__purchase,button.gtm__platform{display:inline-block;border:2px solid #000;margin:0 10px 15px;}
html.webp button.gtm__platform,button.gtm__platform{width:auto;padding:0;background:none!important;cursor:pointer;}
html.webp .gtm__platform{background:url(../img/common/button_bg.webp)!important;}
.version-row .btn-version.version-active,.btn-platform.console-active{border-color:#f4d034;}
.gtm__version.version-active h5,.btn-platform.console-active h5{background-image:url(../img/common/button_selected_bg.jpg);color:#010101}
.version-row:last-child{margin-right:0;}
.version-row .btn-version{border:2px solid #000;display:inline-block;margin:0 10px 15px;background:transparent;cursor:pointer;}
.gtm__version h5,button.gtm__platform h5{display:inline-block;color:#FFF;margin:5px;padding:10px 25px;background:url(../img/common/button_bg.jpg) left top repeat-x;background-size:auto 100%;width:225px;text-align:center;}
.gtm__version h5 img{height:100%;width:auto;margin-left:20px;display:inline-block;vertical-align:middle;text-align:right;}
.purchase-btn{border:none;background:none;}
.gtm__platform{display:inline-block;margin:5px;padding:10px 25px;background:url(../img/common/button_bg.jpg) left top repeat-x;background-size:auto 100%;min-width:225px;text-align:center;}
.version-row .btn-version.version-active,.btn-platform.console-active{border-color:#f4d034;}
.gtm__version.version-active h5,.btn-platform.console-active h5{background-image:url(../img/common/button_selected_bg.jpg);color:#010101}
.version-row:last-child{margin-right:0;}
.version-row .btn-version{border:2px solid #000;display:inline-block;margin:0 10px 15px;background:transparent;cursor:pointer;}
.gtm__version h5,button.gtm__platform h5{display:inline-block;color:#FFF;margin:5px;padding:10px 25px;background:url(../img/common/button_bg.jpg) left top repeat-x;background-size:auto 100%;width:225px;text-align:center;}
.gtm__version h5 img{height:100%;width:auto;margin-left:20px;display:inline-block;vertical-align:middle;text-align:right;}
.purchase-btn{border:none;background:none;}
.gtm__platform{display:inline-block;margin:5px;padding:10px 25px;background:url(../img/common/button_bg.jpg) left top repeat-x;background-size:auto 100%;min-width:225px;text-align:center;}
.gtm__platform img{height:100%;width:auto;margin-left:20px;display:inline-block;vertical-align:middle;text-align:right;}
@media screen and (min-width:1920px){
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg.webp)!important;}
.purchase:before{background-image:url(../img/purchase/purchase_bg.jpg)!important;}
}
@media screen and (min-width:1280px) and (max-width:1919px){
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg_lg.webp)!important;}
.purchase:before{background-image:url(../img/purchase/purchase_bg_lg.jpg)!important;}
}
@media screen and (min-width:640px) and (max-width:1279px){
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg_md.webp)!important;}
.purchase:before{background-image:url(../img/purchase/purchase_bg_md.jpg)!important;}
}
@media screen and (min-width:640px){
body.it .purchase .purchase-title{letter-spacing:1.85px;}
body.es .purchase .hide-mobile{display:inline-block;}
}
@media screen and (min-width:1920px){
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg.webp)!important;}
.purchase:before{background-image:url(../img/purchase/purchase_bg.jpg)!important;}
}
@media screen and (min-width:1280px) and (max-width:1919px){
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg_lg.webp)!important;}
.purchase:before{background-image:url(../img/purchase/purchase_bg_lg.jpg)!important;}
}
@media screen and (min-width:640px) and (max-width:1279px){
html.webp .purchase:before{background-image:url(../img/purchase/purchase_bg_md.webp)!important;}
.purchase:before{background-image:url(../img/purchase/purchase_bg_md.jpg)!important;}
}
@media screen and (min-width:640px){
body.it .purchase .purchase-title{letter-spacing:1.85px;}
body.es .purchase .hide-mobile{display:inline-block;}
}
@media screen and (min-width:1024px){
.purchase h2.section-header{font-size:96px;}
.purchase h3.platform-title,.purchase h3.version-title,.purchase h3.retail-title{font-size:36px;}
}
/* END Purchase */
/* Newsletter */
.newsletter .newsletter-subheader-text{color: #fff;text-align:center;position:relative;width:80%;margin:0 auto 20px;font-size:14px;font-weight:400;line-height:1.5;text-shadow:0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;z-index:10;}
.newsletter .newsletter-title {position: relative; text-align: left;width: 85%;max-width: 1280px;margin: 0 auto;z-index: 5;}
.newsletter #newsletter-title-wrapper{position:relative;margin-bottom:100px;}
.newsletter .section-header{position: relative;text-align: left;width: 85%;max-width: 1280px;margin: 0 auto;z-index:7;}
.newsletter #newsletter-title-bg1{position:absolute;width:200vw;max-width:3500px;height:200%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;}
.newsletter #newsletter-title-bg2{position:absolute;width:200vw;max-width:1920px;aspect-ratio:12.8/1;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;}
.newsletter .section-container{margin-top:50px;text-align:center;}
.newsletter_imgGroup {width: 95%;max-width: 500px;margin: 30px auto;}
.newsletter_imgGroup img {display:inline-block; width: 49%;}
.newsletter_imgGroup img:first-child {margin-right: 1%}
@media screen and (min-width: 1024px){
.newsletter .section-header {margin: 0 auto 80px;font-size: 96px;}
}
/* Newsletter end */
/* Footer */
footer{background-color:#262626;position:relative;z-index:15;}
footer{background-color:#262626;position:relative;z-index:15;}
.topBarFooter{margin:0 auto;max-width:1024px;position:relative;text-align:center}
.whiteBoxBG,.whiteBoxBGNonContainer{background-color:#fff;height:60px;position:relative;width:100%}
html.webp .whiteBoxBG:before{background-image:url(../img/common/triangle.webp)!important;}
.whiteBoxBG:before{background-image:url(../img/common/triangle.png);background-repeat:no-repeat;background-size:100%;content:'';height:75px;right:-22px;overflow:hidden;position:absolute;top:0;width:22px}
.whiteBoxBGNonContainer{position:absolute}
.whiteBoxBG p{color:#262626;left:50%;position:absolute;text-transform:uppercase;top:50%;transform:translate(-50%,-50%)}
.socialGroup,.newsletterGroup{display:block;margin:0 auto;max-width:320px;text-align:center;height:auto;}
.socialIcons{width:100%}
.socialIcons li{display:inline-block;margin:25px 1.68% 0 0;max-width:57px;width:18%}
.socialIcons li:last-child{margin-right:0}
.socialIcons li img{width:100%}
.newsletterButton{font-size:16px;background-color:#FFF;display:inline-block;color:#000;cursor:pointer;margin:20px auto 0;max-width:275px;padding:15px 30px;text-align:center;text-transform:uppercase;width:100%}
.newsletterButton h5{font-size:13px;}
.logosGroup{margin:0 auto;max-width:1200px;padding:25px 0;position:relative;text-align:center}
.logosGroup img{margin:10px;height:50px;}
.logosGroup .rggstudioLogo{height:90px}
.logosGroup .psLogo {height:40px;}
.logosGroup .switchLogo {height:40px;}
.logosGroup .ratingsIcon,.logosGroup #usk{height:90px;width:auto;}
.logosGroup #usk{display:none;}
body.de .logosGroup #usk{display:inline-block;}
.logosGroup .esrbCert{height:90px;display:none}
body.en .logosGroup .esrbCert{display:inline-block;}
.copy{font-size:12px;margin:0 auto;max-width:900px;padding-bottom:15px;text-align:center;width:95%}
.policyGroup,.policyGroup a{text-align:center;font-size:10px;line-height:1.85;padding:15px 0;width:90%;max-width:1000px;margin:0 auto}
.policyGroup{padding:0 0 8px}
.policyGroup a{margin:0 10px;padding:0;text-transform:uppercase;font-size:16px}
@media screen and (min-width: 500px) {
.logosGroup{padding:15px 0}
}
@media screen and (min-width: 640px) {
.whiteBoxBG,.whiteBoxBGNonContainer{display:inline-block;height:75px;right:60%}
.whiteBoxBG p{left:auto;right:0;transform:translate(-60%,-50%)}
.socialGroup{left:48%;position:absolute;top:9px}
.socialIcons li{margin-top:0}
}
@media screen and (min-width: 768px) {
.whiteBoxBG,.whiteBoxBGNonContainer{right:70%}
.socialGroup{position:absolute;top:50%;left:50%;height:auto;transform:translate(-50%,-50%);}
.socialIcons li{max-width:45px}
.newsletterGroup{height:45px;left:72%;position:absolute;top:17px;width:26%}
.newsletterButton{margin:0 auto;padding:12.5px 0;width:100%;font-size:16px}
}
/* END Footer */
/* PAGE TOP */
#page-top{position:fixed;display:block;width:75px;right:35px;bottom:35px;z-index:99;}
/* PAGE TOP END */
/* FANCYBOX OVERRIDES STYLES */
html.webp .fancybox-bg{background-image:url(../img/fancybox/bg.webp)!important;}
/* Override Styles */
.gold{background: rgb(201,154,22);background: linear-gradient(45deg, rgba(201,154,22,1) 0%, rgba(154,106,4,1) 13%, rgba(230,189,83,1) 20%, rgba(237,195,93,1) 30%, rgba(252,227,124,1) 40%, rgba(255,255,198,1) 50%, rgba(252,227,124,1) 70%, rgba(237,195,93,1) 75%, rgba(230,189,83,1) 80%, rgba(154,106,4,1) 90%, rgba(201,154,22,1) 100%);}
.silver{background: rgb(231,234,237);background: linear-gradient(45deg, rgba(231,234,237,1) 0%, rgba(174,179,188,1) 30%, rgba(194,198,209,1) 40%, rgba(253,255,254,1) 61%, rgba(162,169,178,1) 70%, rgba(158,165,175,1) 80%, rgba(84,91,107,1) 90%, rgba(204,208,217,1) 100%);}
.bronze{background: rgb(217,152,124);background: linear-gradient(45deg, rgba(217,152,124,1) 0%, rgba(238,173,143,1) 20%, rgba(255,229,193,1) 30%, rgba(255,229,193,1) 50%, rgba(255,229,193,1) 70%, rgba(239,174,133,1) 85%, rgba(159,75,54,1) 100%);}
.opacity0{opacity:0;}
.hidden {display: none;}
.hiddenImportant{display:none!important;}
.nooverflow{overflow:hidden;}
/* CSS Animations */
@keyframes fadeOutZoom {
from {opacity: 1;}
to {opacity: 0;transform: translate(-50%,-50%) scale(2);}
}
.fadeOutZoom {
animation-name: fadeOutZoom;
}
.animate__animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/* Internet Explorer Conditionals */
/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* Hero Section */
.heroVideo{height:150%;width:150%;left:-25%;position:absolute;top:0;}
}
/* IE Edge 12+ CSS styles go here */
@supports (-ms-accelerator:true) {
}
/* Style overrides for Firefox 2 */
html>/**/body #ccc .ccc-notify-button, x:-moz-any-link {
margin:4px 10px 4px 0
}
/* Style overrides for Firefox 3 */
html>/**/body #ccc .ccc-notify-button, x:-moz-any-link, x:default {
margin:4px 10px 4px 0
}
/* Style overrrides for any Firefox */
@-moz-document url-prefix() {
#ccc .ccc-notify-button{margin:4px 10px 4px 0!important}
}