html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
ul {
    list-style: none
}
blockquote,
q {
    quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}
del {
    text-decoration: line-through
}
abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0
}
input,
select {
    vertical-align: middle
}
body {
    -webkit-text-size-adjust: 100%
}
body {
    font-family: 'Roboto', 'Noto Sans JP', sans-serif !important
}
#loader {
    z-index: 1000
}
#headerWrapper {
    z-index: 500
}
body {
    color: #fff;
    background-color: #000
}
img {
    vertical-align: bottom
}
a,
a img {
    outline: none
}
::selection {
    background: rgba(168, 0, 0, 0.6)
}
.txtS {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.8;
    font-weight: 300
}
.txtN,
#index .newsbox dt,
#index .newsbox dd,
.charaDetWrapper .profbox .profile dt,
.charaDetWrapper .profbox .profile dd {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 2;
    font-weight: 300
}
.txtL {
    font-size: 16px;
    font-size: 1rem;
    line-height: 2.2;
    font-weight: 300
}
.txtLL {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.8;
    font-weight: 300
}
.strong {
    color: #ffd162;
    font-weight: bold;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212
}
#loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
#loader .layer1,
#loader .layer2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 45%;
    top: 40%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%)
}
#loader .layer1 {
    background: url("img/common/loading_layer1.png") no-repeat;
    -webkit-animation: loadingAnime1 6s infinite linear;
    animation: loadingAnime1 6s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
#loader .layer2 {
    background: url("img/common/loading_layer2.png") no-repeat;
    -webkit-animation: loadingAnime2 1s infinite linear;
    animation: loadingAnime2 1s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes loadingAnime1 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}
@keyframes loadingAnime1 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}
@-webkit-keyframes loadingAnime2 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes loadingAnime2 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
#stage {
    width: 100%;
    min-width: 1240px;
    min-height: 100vh;
    background: url("img/common/bg_main.jpg") 50% 0/100% auto repeat-y;
    display: none
}
.pageParticle {
    position: fixed;
    top: 0;
    background: transparent
}
#mainWrapper {
    position: relative;
    /*padding: 260px 0 150px 0*/
    padding: 0;
}
.page_ttl {
    position: relative;
    width: 705px;
    height: 230px;
    margin: 0 auto;
    padding-top: 75px;
    box-sizing: border-box;
    text-align: center;
    background: url("img/common/page_ttl_bg.png") no-repeat
}
.page_ttl .gear1,
.page_ttl .gear2 {
    content: '';
    display: block;
    width: 114px;
    height: 114px;
    position: absolute;
    top: 46px;
    background: url("img/common/page_ttl_gear.png") no-repeat
}
.page_ttl .gear1 {
    left: 80px
}
.page_ttl .gear2 {
    right: 80px
}
.ypWraaper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
.ypWraaper video {
    position: absolute;
    right: 50%;
    bottom: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%)
}
.ypWraaper::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6) url("img/common/mesh.png")
}
#fullvideo {
    position: fixed;
    right: 50%;
    bottom: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%)
}
#headerWrapper {
    position: absolute;
    width: 100%;
    background: url("img/common/nav/bg_shadow.png") repeat-x
}
#header {
    position: relative;
    width: 1172px;
    margin: 0 auto;
    background: url("img/common/nav/bg_layer1.png") 50% 0 no-repeat
}
#header .innerbox {
    height: 206px;
    background: url("img/common/nav/bg_layer2.png") 50% 0 no-repeat
}
#header .site_ttl {
    position: absolute;
    /*width: 334px;*/
    width: 535px;
    height: 206px;
    right: 50%;
    top: 0;
    z-index: 1;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0);
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out
}
#header .site_ttl .logoCanvas {
    display: block;
    position: absolute;
    left: 0;
    top: -20px;
    width: 535px;
    text-align: center;
}
#header .site_ttl .logo {
    position: absolute;
    left: 0;
    top: 54px;
}
#header .site_ttl:hover {
    opacity: 0.8
}
#header .globalNavs {
    position: relative;
    top: 45px;
    letter-spacing: -0.4em;
    text-align: center
}
#header .globalNavs li {
    display: inline-block;
    letter-spacing: normal
}
#header .globalNavs li img {
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}
#header .globalNavs li a:hover img,
#header .globalNavs li.active img {
    opacity: 1
}
#header .globalNavs li.story {
    background: url("img/common/nav/nav_story.png") no-repeat
}
#header .globalNavs li.character {
    background: url("img/common/nav/nav_character.png") no-repeat
}
#header .globalNavs li.system {
    background: url("img/common/nav/nav_system_invalid.png") no-repeat
}
#header .globalNavs li.mode {
    margin-left: 310px;
    background: url("img/common/nav/nav_mode_invalid.png") no-repeat
}
#header .globalNavs li.products {
    background: url("img/common/nav/nav_products.png") no-repeat
}
#header .globalNavs li.special {
    background: url("img/common/nav/nav_special_invalid.png") no-repeat
}
#header .gear1,
#header .gear2 {
    position: absolute;
    bottom: 40px;
    z-index: -1;
    width: 117px;
    height: 117px;
    background: url("img/common/nav/gear.png") no-repeat
}
#header .gear1 {
    left: 20px
}
#header .gear2 {
    right: 20px
}
#products {
    padding-bottom: 50px;
}
#footerEtc {
    margin-top: -185px;
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid #3e3939;
    text-align: center;
}
.ms-link {
    position: relative;
    top: 10px;
}

.footer-addy {
    z-index: 1001;
    position: absolute;
    left: 20px;
    bottom: 60px;
}

.footer-twitch {
    z-index: 1001;
    position: absolute;
    right: 20px;
    bottom: 60px;
}

#footerEtc .bnrs {
    padding-top: 20px;
    letter-spacing: -0.4em;
    text-align: center
}
#footerEtc .bnrs li {
    display: inline-block;
    letter-spacing: normal;
    margin-top: 20px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}
#footerEtc .bnrs li:not(:last-child) {
    margin-right: 20px
}
#footerEtc .bnrs li:hover {
    opacity: 0.8
}
#footerEtc .bnrs li img {
    width: 180px
}
#footerEtc .footer {
    margin: 0 auto 0 auto;
    background: url("img/common/footer/bg_layer1.png") repeat-x
}
#footerEtc .innerbox {
    position: relative;
    min-height: 139px;
    padding: 0 40px;
    background: url("img/common/footer/bg_layer2.png") 50% 0 no-repeat
}

.brooklyn {
    margin-top: 100px;
}
.page_ttl {
    height: 230px;
    margin-top: -25px;
}

#footerEtc aside {
    height: 120px;
}
#footerEtc .flbox {
    overflow: hidden
}
#footerEtc .flbox .le {
    float: left
}
#footerEtc .flbox .ri {
    float: right;
    overflow: hidden
}
#footerEtc .share {
    float: left;
    margin-top: 16px
}
#footerEtc .share li {
    float: left;
    margin-right: 10px
}
#footerEtc .copyrights {
    display: block;
    float: left;
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 1.7;
    font-weight: normal
}
#footerEtc .copyrights img {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle
}
#footerEtc .copyrights a {
    display: block;
    color: #FFF;
    text-decoration: none
}
#footerEtc .pageup {
    position: absolute;
    right: 50%;
    top: 0;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background: url("img/common/footer/btn_pageup_bg.png") no-repeat
}
#footerEtc .pageup img {
    display: block;
    /*-webkit-transform: translate(0, 3px);
    -ms-transform: translate(0, 3px);
    transform: translate(0, 3px);
    -webkit-animation: pageupAnime 0.8s infinite linear;
    animation: pageupAnime 0.8s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both*/
    margin-top: 28px;
}
#footerEtc .pageup:hover {
    opacity: 0.6
}
@-webkit-keyframes pageupAnime {
    0% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px)
    }
    50% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px)
    }
}
@keyframes pageupAnime {
    0% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px)
    }
    50% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(0, 3px);
        -ms-transform: translate(0, 3px);
        transform: translate(0, 3px)
    }
}
#index {
    overflow-y: scroll
}
#index .logoFire {
    position: fixed;
    right: 50%;
    bottom: 50%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%)
}
#index .logoFire .innerbox {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0
}
#index .logoFire .logo {
    position: absolute;
    top: 0
}
#index .logoFire .logoCanvas {
    -webkit-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px)
}
#index #mainWrapper {
    padding-top: 0;
    overflow: hidden
}
#index .hero {
    position: relative;
    padding-top: 126.8%
}
#index .hero .bgs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
#index .hero .bgLayer1,
#index .hero .bgLayer2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
#index .hero .bgLayer1 {
    background: url("img/index/visual_layer1.png") 50% 0/100% auto no-repeat
}
#index .hero .bgLayer2 {
    background: url("img/index/visual_layer2.png") 50% 0/100% auto no-repeat
}
#index .onsale {
    width: 293px;
    position: absolute;
    right: 0;
    top: 140px
}
#index .onsale .back {
    width: 293px;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden
}
#index .onsale .front {
    width: 293px;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden
}
#index .gears {
    position: absolute;
    right: -220px;
    top: 25%;
    width: 487px;
    height: 465px
}
#index .gears .gear1 {
    width: 162px;
    height: 162px;
    position: absolute;
    left: 200px;
    bottom: 0;
    background: url("img/index/parts1_gear1.png") no-repeat
}
#index .gears .gear2 {
    width: 182px;
    height: 182px;
    position: absolute;
    left: 0;
    top: 95px;
    background: url("img/index/parts1_gear2.png") no-repeat
}
#index .gears .gear3 {
    width: 225px;
    height: 225px;
    position: absolute;
    left: 40px;
    bottom: 40px;
    background: url("img/index/parts1_gear3.png") no-repeat
}
#index .gears .gear4 {
    width: 400px;
    height: 400px;
    position: absolute;
    right: 0;
    top: 0;
    background: url("img/index/parts1_gear4.png") no-repeat
}
#index .infobox {
    position: fixed;
    left: 0;
    top: 170px;
    z-index: 300
}
#index .infobox>section::after {
    content: '';
    display: block;
    width: 462px;
    height: 92px;
    background: url("img/index/info_bg_b.png") no-repeat
}
#index .infobox .innerbox {
    width: 462px;
    padding-left: 20px;
    box-sizing: border-box;
    background: url("img/index/info_bg_m.png") repeat-y;
    overflow: hidden
}
#index .newsbox .ttlArea,
#index .twitterbox .ttlArea {
    overflow: hidden
}
#index .newsbox .sttl,
#index .twitterbox .sttl {
    float: left
}
#index .newsbox .btn,
#index .twitterbox .btn {
    float: right
}
#index .newsbox {
    width: 370px;
    margin-top: 30px
}
#index .newsbox dt {
    margin-top: 15px;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212
}
#index .newsbox dd {
    padding-bottom: 15px;
    border-bottom: 1px solid #817d7a
}
#index .newsbox dd a {
    color: #FFF;
    text-decoration: none
}
#index .newsbox dd a:hover {
    text-decoration: underline
}
#index .twitterbox {
    width: 370px
}
#index .twitterbox .wgt {
    margin-top: 15px
}
#index .twitterbox .btn {
    display: none
}
#index .moviebox {
    position: relative;
    margin-top: -10%
}
#index .moviebox .ttlWrapper {
    position: absolute;
    right: -5%;
    top: 0;
    width: 0;
    -webkit-transform: translate(0, -20px) rotate(-7.5deg);
    -ms-transform: translate(0, -20px) rotate(-7.5deg);
    transform: translate(0, -20px) rotate(-7.5deg);
    overflow: hidden
}
#index .moviebox .ttl {
    width: 100%;
    height: 198px;
    text-align: center;
    background: url("img/index/ttl_movie_bg.png") 50% 0 repeat-x
}
#index .moviebox .ttl img {
    -webkit-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    transform: translate(100px, 0);
    opacity: 0
}
#index .moviebox .boxs {
    width: 1175px;
    margin: 0 auto;
    padding-top: 200px;
    overflow: hidden
}
#index .moviebox .movieSuper {
    position: relative;
    float: left;
    width: 574px;
    height: 379px;
    margin-top: 20px;
    background: url("img/index/movie_bg.png") no-repeat;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0
}
#index .moviebox .movieSuper:nth-child(even) {
    margin-left: 27px
}
#index .moviebox .movieSuper a {
    display: block;
    position: absolute;
    right: 50%;
    bottom: 49%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}
#index .moviebox .movieSuper a:hover {
    opacity: 0.7
}
#character {
    overflow-y: scroll
}
#character.top .ypWraaper {
    display: none
}
#character:not(.top) #mainWrapper {
    padding: 120px 0 0 0;
    overflow: hidden
}
#character:not(.top) .charaLstWrapper {
    -webkit-transform: translate(0, -160px);
    -ms-transform: translate(0, -160px);
    transform: translate(0, -160px)
}
#character:not(.top).kyk .charaImgs {
    right: 45%
}
#character:not(.top).mll .charaImgs {
    right: 45%
}
#character.movie {
    overflow-y: visible !important
}
#charaIndexMovie {
    width: 100%;
    height: 100%
}
.charaLstWrapper {
    position: relative;
    width: 1240px;
    min-height: 1100px;
    margin: 0 auto;
    background: url("img/chainxbg.png") 50% 0 no-repeat
}
.charaLstWrapper .charaselect {
    position: absolute;
    right: 50%;
    top: 310px;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0)
}
.charaLstWrapper .charaselect img {
    display: block
}
.charaLstWrapper .snacks {
    position: absolute;
    right: 50%;
    top: 380px;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0)
}
.charaLstWrapper .snacks img {
    position: absolute;
    display: block
}
.charaLstWrapper .snacks .robosnacks {
    right: 0;
} 
.charaLstWrapper .snacks .snacksaba {
    left: 0;
} 
.charaLstWrapper .imagebox {
    width: 710px;
    position: absolute;
    right: 50%;
    top: 230px;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0)
}
.charaLstWrapper .imagebox .imgSuper {
    width: 100%;
    position: absolute;
    opacity: 0
}
.charaLstWrapper .imagebox .imgSuper img {
    width: 100%;
    height: auto
}
.charaLstWrapper .navbox {
    width: 1195px;
    position: absolute;
    top: 230px;
    right: 50%;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0)
}
.charaLstWrapper .navbox .le,
.charaLstWrapper .navbox .ri {
    width: 418px;
    height: 570px;
    position: absolute;
    top: 0
}
.charaLstWrapper .navbox .le {
    left: 0;
    /*background: url("img/character/left_bg.png") no-repeat*/
}
.charaLstWrapper .navbox .ri {
    right: 0;
    /*background: url("img/character/right_bg.png") no-repeat*/
}
.charaLstWrapper .navSuper {
    position: absolute
}
.charaLstWrapper .navSuper span {
    display: block;
    width: 157px;
    height: 134px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0
}
.charaLstWrapper .navSuper:not(.noselect) span {
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out
}
.charaLstWrapper .navSuper:hover span,
.charaLstWrapper .navSuper.noselect span {
    opacity: 0.1
}

/* Solid Saint Squad */
.charaLstWrapper .navSuper.thehairkid {
    left: 19px;
    top: 34px;
    background: url("img/character/nav_thehairkid.png") no-repeat
}

.charaLstWrapper .navSuper.saintpepsi {
    left: 131px;
    top: 10px;
    background: url("img/character/nav_saintpepsi.png") no-repeat
}

.charaLstWrapper .navSuper.wtsnacks {
    left: 131px;
    top: 10px;
    background: url("img/character/nav_robosnacks.png") no-repeat;
}

.charaLstWrapper .navSuper.ctrlr {
    left: 121px;
    top: 197px;
    background: url("img/character/nav_ctrlr.png") no-repeat
}
.charaLstWrapper .navSuper.lovespread {
    left: 19px;
    top: 409px;
    background: url("img/character/nav_lovespread.png") no-repeat
}

/* Left side */
.charaLstWrapper .navSuper.absrdst {
    left: 131px;
    top: 10px;
    background: url("img/character/nav_absrdst.png") no-repeat
}
.charaLstWrapper .navSuper.diveo {
    left: 243px;
    top: 34px;
    background: url("img/character/nav_diveo.png") no-repeat
}

.charaLstWrapper .navSuper.voia {
    left: 17px;
    top: 167px;
    background: url("img/character/nav_voia.png") no-repeat
}

.charaLstWrapper .navSuper.koinu {
    left: 146px;
    top: 197px;
    background: url("img/character/nav_koinu.png") no-repeat
}

.charaLstWrapper .navSuper.mitomoro {
    left: 125px;
    top: 386px;
    background: url("img/character/nav_mitomoro.png") no-repeat
}

.charaLstWrapper .navSuper.t2kazuya {
    left: 243px;
    top: 409px;
    background: url("img/character/nav_t2kazuya.png") no-repeat
}

.charaLstWrapper .navbox .name {
    position: absolute;
}
.charaLstWrapper .navbox .name div {
    position: absolute;
    width: 100%;
    height: 100%;
}
.charaLstWrapper .navbox .name div.glow {
    background: url(img/names-glow.png) no-repeat;
}
.charaLstWrapper .navbox .name div.name {
    background: url(img/names.png) no-repeat;
}

.le .navSuper:hover span {
    transform: matrix(1, 0, 0, 1, 5, -5);
}

#names{
    position: absolute;
    z-index: 1001;
}
#names .x {
    position: absolute;
    width: 69px;
    height: 74px;
    background: url(img/x-med.png) no-repeat;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    transform: scale(1);
}
#names .xx {
    position: absolute;
    width: 70px;
    height: 61px;
    background: url(img/xx.png) no-repeat;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    transform: scale(1);
}
#names a {
    display: block;
    position: absolute;
}
#names .name:hover .x, #names .name:hover .xx, #names .name.hover .x {
    opacity: 0.8;
    transform: scale(0.9);
}

.name.absrdst-x-diveo {
    left: 102px;
    top: -43px;
    width: 318px;
    height: 89px;
}
.name.absrdst-x-diveo .x {
    left: 158px;
    top: 12px;
}

.name.absrdst-x-diveo .absrdst {
    width: 171px;
    height: 62px;
}
.name.absrdst-x-diveo .absrdst div.name, .name.absrdst-x-diveo .absrdst div.glow {
    background-position: -102px 0;
}
.name.absrdst-x-diveo .diveo {
    width: 112px;
    height: 62px;
    left: 206px;
    top: 27px;
}
.name.absrdst-x-diveo .diveo div.name, .name.absrdst-x-diveo .diveo div.glow {
    background-position: -308px -27px
}

.name.voia-x-koinu {
    left: 120px;
    top: 137px;
    width: 246px;
    height: 87px;
}
.name.voia-x-koinu .x {
    left: 84px;
    top: 10px;
}

.name.voia-x-koinu .voia {
    width: 97px;
    height: 62px;
}
.name.voia-x-koinu .voia div.name, .name.voia-x-koinu .voia div.glow {
    background-position: -120px -180px;
}
.name.voia-x-koinu .koinu {
    width: 112px;
    height: 62px;
    left: 131px;
    top: 25px;
}
.name.voia-x-koinu .koinu div.name, .name.voia-x-koinu .koinu div.glow {
    background-position: -251px -205px;
}

.name.mitomoro-x-t2kazuya {
    left: 23px;
    top: 323px;
    width: 395px;
    height: 89px;
}
.name.mitomoro-x-t2kazuya .x {
    left: 177px;
    top: 12px;
}

.name.mitomoro-x-t2kazuya .mitomoro {
    width: 186px;
    height: 61px;
}
.name.mitomoro-x-t2kazuya .mitomoro div.name, .name.mitomoro-x-t2kazuya .mitomoro div.glow {
    background-position: -19px -366px;
}
.name.mitomoro-x-t2kazuya .t2kazuya {
    width: 171px;
    height: 61px;
    left: 223px;
    top: 28px;
}
.name.mitomoro-x-t2kazuya .t2kazuya div.name, .name.mitomoro-x-t2kazuya .t2kazuya div.glow {
    background-position: -246px -394px;
}

.name.thehairkid-x-wtsnacks {
    left: 684px;
    top: -42px;
    width: 450px;
    height: 88px;
}
.name.thehairkid-x-wtsnacks .x {
    left: 195px;
    top: 12px;
}

.name.thehairkid-x-wtsnacks .thehairkid {
    width: 210px;
    height: 62px;
    top: 21px;
}
.name.thehairkid-x-wtsnacks .thehairkid div.name, .name.thehairkid-x-wtsnacks .thehairkid div.glow {
    background-position: -683px -27px;
}
.name.thehairkid-x-wtsnacks .wtsnacks {
    width: 204px;
    height: 62px;
    left: 246px;
    top: -6px;
}
.name.thehairkid-x-wtsnacks .wtsnacks div.name, .name.thehairkid-x-wtsnacks .wtsnacks div.glow {
    background-position: -930px -1px;
}

.secretguest {
    position: absolute;
    left: 852px;
    top: -58px;
}

.name.solidsaintsquad {
    left: 813px;
    top: -35px;
    width: 258px;
    height: 57px;
}

.name.solidsaintsquad .xx.one {
    left: 56px;
    top: 95px;
}

.name.solidsaintsquad .xx.two {
    left: 176px;
    top: 67px;
}

.name.solidsaintsquad .sss {
    width: 258px;
    height: 57px;
}
.name.solidsaintsquad .sss div.name, .name.solidsaintsquad .sss div.glow {
    background-position: -813px -8px;
}

.name.ctrlr {
    left: 1054px;
    top: 221px;
    width: 135px;
    height: 61px;
}

.name.ctrlr a {
    width: 135px;
    height: 61px;
}
.name.ctrlr div.name, .name.ctrlr div.glow {
    background-position: -1054px -264px !important;
}

.name.lovespread {
    left: 951px;
    top: 430px;
    width: 211px;
    height: 62px;
}

.name.lovespread a {
    width: 211px;
    height: 62px;
}
.name.lovespread div.name, .name.lovespread div.glow {
    background-position: -951px -473px !important;
}

@-webkit-keyframes pulse {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
  to { 
    opacity: 1;
  }
}

@keyframes bounce {
    0% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(-5px);
    }
    100% {
        transform:translateY(0);
    }
}

.name a:hover, .name a.hover, .name.hover a { 
  -webkit-animation-name: bounce; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out;

}

.name a:hover div.glow, .name a.hover div.glow, .name.hover a div.glow { 
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: infinite; 
}

.blackbearbar {
    width: 277px;
    height: 38px;
    background: url(img/blackbearbar.png);
    margin: 10px auto 0 auto;
}

.podcastmp3 {
    width: 244px;
    height: 39px;
    background: url(img/podcastmp3.png);
    margin: 10px auto 0 auto;
}

.infobar {
    width: 329px;
    height: 44px;
    background: url(img/info.png);
    margin: 0 auto 0 auto;
}

.twitchvideoarchive {
    width: 295px;
    height: 33px;
    background: url(img/twitchvideoarchive.png);
    margin: 6px auto 0 auto;
}

.hidespan span {
    display: none;
}

#flyer {
    position: absolute;
    /*background: #0f0;*/
    border-bottom: 1px solid #0f0;
    opacity: 0.5;
    left: 0;
    top: 0;
    width: 1440px;
    height: 1864px;
    height: 540px;
    z-index: 1001;
}

.charaLstWrapper .namebox {
    position: absolute;
    right: 50%;
    bottom: 0;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0);
    width: 608px;
    height: 254px;
    background: url("img/map.png") no-repeat
}
.charaLstWrapper .namebox .nameuper {
    position: absolute;
    right: 50%;
    bottom: 60%;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
    opacity: 0
}
.charaLstWrapper .namebox .nameuper img {
    width: 330px;
    height: auto
}
.charaDetWrapper {
    position: relative;
    min-height: 1050px;
    z-index: 10
}
.charaDetWrapper .controller {
    position: absolute;
    right: 0;
    top: 110px
}
.charaDetWrapper .btnBackLst {
    background: url("img/character/btn_backlist.png") no-repeat;
    -webkit-transform: translate(10px, 0);
    -ms-transform: translate(10px, 0);
    transform: translate(10px, 0);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}
.charaDetWrapper .btnBackLst img {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}
.charaDetWrapper .btnBackLst:hover {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}
.charaDetWrapper .btnBackLst:hover img {
    opacity: 1
}
.charaDetWrapper .prevNext {
    position: relative;
    height: 437px;
    margin-top: 19px
}
.charaDetWrapper .prevNext::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("img/character/prev_next_cover.png") 100% 0 no-repeat;
    pointer-events: none
}
.charaDetWrapper .prevNext .btnNext,
.charaDetWrapper .prevNext .btnPrev {
    position: absolute;
    cursor: pointer
}
.charaDetWrapper .prevNext .btnNext .gear,
.charaDetWrapper .prevNext .btnPrev .gear {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
.charaDetWrapper .prevNext .btnNext .arrow img,
.charaDetWrapper .prevNext .btnPrev .arrow img {
    opacity: 0;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out
}
.charaDetWrapper .prevNext .btnNext:hover .arrow img,
.charaDetWrapper .prevNext .btnPrev:hover .arrow img {
    opacity: 1
}
.charaDetWrapper .prevNext .btnNext {
    left: 13px;
    top: 50px;
    background: url("img/character/btn_next_bg.png") no-repeat
}
.charaDetWrapper .prevNext .btnNext .gear {
    background: url("img/character/btn_next_gear.png") no-repeat
}
.charaDetWrapper .prevNext .btnNext .arrow {
    background: url("img/character/btn_next.png") no-repeat
}
.charaDetWrapper .prevNext .btnPrev {
    left: 10px;
    top: 195px;
    background: url("img/character/btn_prev_bg.png") no-repeat
}
.charaDetWrapper .prevNext .btnPrev .gear {
    background: url("img/character/btn_prev_gear.png") no-repeat
}
.charaDetWrapper .prevNext .btnPrev .arrow {
    background: url("img/character/btn_prev.png") no-repeat
}
.charaDetWrapper .charaImgs {
    width: 960px;
    position: absolute;
    right: 50%;
    top: 40px;
    -webkit-transform: translate(750px, 0);
    -ms-transform: translate(750px, 0);
    transform: translate(750px, 0)
}
.charaDetWrapper .charaImgs .image {
    width: 100%;
    height: auto;
    display: block
}
.charaDetWrapper .charaImgs .catchcopy {
    position: absolute;
    right: 50%;
    bottom: 200px;
    -webkit-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    transform: translate(50%, 0)
}
.charaDetWrapper .detailbox {
    position: absolute;
    right: 50%;
    top: 101px;
    -webkit-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    transform: translate(100px, 0)
}
.charaDetWrapper .charaNamebox {
    margin-left: 45px
}
.charaDetWrapper .charaNamebox .innerbox {
    margin-top: 5px;
    padding-left: 15px;
    overflow: hidden
}
.charaDetWrapper .charaNamebox .name {
    float: left;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.7;
    font-weight: bold
}
.charaDetWrapper .charaNamebox .cv {
    float: left;
    margin: 3px 0 3px 16px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #888;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.8;
    font-weight: 400
}
.charaDetWrapper .charaNamebox .cv span {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7;
    font-weight: 500
}
.charaDetWrapper .profbox {
    width: 614px;
    margin-top: 19px
}
.charaDetWrapper .profbox::before,
.charaDetWrapper .profbox::after {
    content: '';
    display: block
}
.charaDetWrapper .profbox::before {
    height: 63px;
    background: url("img/character/prof_bg_h.png") no-repeat
}
.charaDetWrapper .profbox::after {
    height: 71px;
    background: url("img/character/prof_bg_b.png") no-repeat
}
.charaDetWrapper .profbox .innerbox {
    padding: 0 78px;
    background: url("img/character/prof_bg_m.png") 50% 0 repeat-y
}
.charaDetWrapper .profbox .profile {
    margin-top: 30px
}
.charaDetWrapper .profbox .profile dl {
    overflow: hidden
}
.charaDetWrapper .profbox .profile dt {
    width: 100px;
    float: left
}
.charaDetWrapper .profbox .profile dd {
    float: left
}
.charaDetWrapper .profbox .ttl {
    margin-bottom: 15px
}
#story {
    overflow-y: scroll
}
#story #stage {
    overflow: hidden
}
#story .ypWraaper {
    height: 0;
    top: 50%;
    overflow: hidden
}
.storyWrapper {
    text-align: center
}
.storyWrapper .abox,
.storyWrapper .abox2 {
    margin-top: 50px
}
.storyWrapper .abox2 {
    opacity: 0
}
.storyWrapper .abox2 .catchcopy {
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3)
}
.storyWrapper .line {
    display: block;
    -webkit-transform: translate(20px, 50px) rotate(0) scale(2);
    -ms-transform: translate(20px, 50px) rotate(0) scale(2);
    transform: translate(20px, 50px) rotate(0) scale(2);
    opacity: 0
}
#products {
    /*overflow-y: scroll*/
}
#products .parts {
    position: absolute;
    width: 285px
}
#products .parts .gear1 {
    position: absolute;
    width: 178px;
    height: 178px;
    background: url("img/products/parts_gear01.png") no-repeat
}
#products .parts .gear2 {
    position: absolute;
    width: 260px;
    height: 260px;
    background: url("img/products/parts_gear02.png") no-repeat
}
#products .parts .gear3 {
    position: absolute;
    width: 175px;
    height: 175px;
    background: url("img/products/parts_gear03.png") no-repeat
}
#products .parts .gear4 {
    position: absolute;
    width: 180px;
    height: 180px;
    background: url("img/products/parts_gear04.png") no-repeat
}
#products .ttl {
    width: 535px;
    height: 109px;
    margin: 0 auto 60px auto;
    padding-top: 32px;
    box-sizing: border-box;
    text-align: center;
    background: url("img/products/ttl_bg.png") no-repeat;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212
}
.ttl-info {
    display: block;
    position: relative;
    z-index: 9001;
    width: 535px;
    height: 109px;
    margin: -50px auto 60px auto;
    padding-top: 28px;
    box-sizing: border-box;
    text-align: center;
    background: url("img/products/ttl_bg.png") no-repeat;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212
}
#products .limitBox,
#products .earyBox {
    position: relative
}
#products .limitBox .innerbox,
#products .earyBox .innerbox {
    width: 1240px;
    margin: 0 auto 0 auto
}
.chainbg {
    background: url(img/character/chainbg.png) no-repeat 0 87px;
    width: 1440px !important;
    padding: 0 100px;
}
.avbg {
    background: url(img/av-titlebg.png) no-repeat;
    width: 100% !important;
    /*padding: 0 100px; */
    height: 383px;
}

#av {
    width: 732px;
    height: 175px;
    margin: 0 auto;
    position: relative;
}

#av .name {
    position: absolute;
}

#av .x {
    width: 158px;
    height: 171px;
    margin: 0 auto;
    background: url(img/x-large.png) no-repeat;
    position: relative;
    top: 85px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    transform: scale(1);
}

#av:hover .x {
    opacity: 0.8;
    transform: scale(0.9);
}

#av .name div {
    position: absolute;
    width: 100%;
    height: 100%;
}

#av .name div.glow {
    background: url(img/av-glow.png) no-repeat;
}
#av .name div.name {
    background: url(img/av-names.png) no-repeat;
}

#av a:hover { 
  -webkit-animation-name: bounce; 
  -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out;

}

#av a:hover div.glow { 
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: infinite; 
}



#av .name.beck {
    width: 285px;
    height: 74px;
    top: 130px;
    left: 0;
}

#av .name.beck div.name, #av .name.beck div.glow {
    background-position: 0 -44px;
}

#av .name.jeremy {
    width: 275px;
    height: 75px;
    top: 128px;
    right: 0;
}

#av .name.jeremy div.name, #av .name.jeremy div.glow {
    background-position: right -44px;
}


#products .limitBox .item1,
#products .limitBox .item3,
#products .earyBox .item1,
#products .earyBox .item3 {
    overflow: hidden
}
#products .limitBox .item1 .txtArea,
#products .limitBox .item3 .txtArea,
#products .earyBox .item1 .txtArea,
#products .earyBox .item3 .txtArea {
    float: left
}
#products .limitBox .item1 .imageArea,
#products .limitBox .item3 .imageArea,
#products .earyBox .item1 .imageArea,
#products .earyBox .item3 .imageArea {
    float: right
}
#products .limitBox .item2,
#products .earyBox .item2 {
    overflow: hidden
}
#products .limitBox .item2 .txtArea,
#products .earyBox .item2 .txtArea {
    float: right
}
#products .limitBox .item2 .imageArea,
#products .earyBox .item2 .imageArea {
    float: left
}
#products .limitBox .txtArea,
#products .earyBox .txtArea {
    width: 602px
}
#products .limitBox .txtArea .txt,
#products .earyBox .txtArea .txt {
    width: 525px;
    padding-left: 50px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7;
    font-weight: normal
}
#products .limitBox .txtArea .att_txt,
#products .earyBox .txtArea .att_txt {
    width: 525px;
    margin-top: 20px;
    padding-left: 50px;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.7;
    font-weight: normal
}
#products .limitBox {
    /*margin-top: 40px;*/
    overflow: hidden
}
#products .limitBox .item2 {
    padding-top: 50px;
    background: url("img/products/contents01_parts02.png") no-repeat
}
#products .limitBox .item3 {
    padding-top: 50px
}
#products .limitBox .soundlst {
    width: 1000px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 1px
}
#products .limitBox .item1 {
    height: 380px;
}

#products .limitBox .soundlst th {
    padding: 10px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7;
    font-weight: normal;
    color: #FFF;
    background: rgba(83, 83, 83, 0.6)
}
#products .limitBox .soundlst td {
    padding: 10px;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.7;
    font-weight: normal;
    color: #FFF;
    background: rgba(140, 140, 140, 0.6)
}
#products .limitBox .soundlst tr td:nth-child(1) {
    text-align: center
}
#products .limitBox .parts {
    right: -100px;
    top: 0
}
#products .limitBox .parts .gear1 {
    left: 0;
    top: 80px
}
#products .limitBox .parts .gear2 {
    left: 50px;
    top: 90px
}
#products .limitBox .parts .gear3 {
    left: 110px;
    top: 0
}
#products .earyBox {
    position: relative;
    overflow: hidden;
    margin-top: 70px;
    padding-top: 50px
}
#products .earyBox .parts {
    left: -150px;
    top: 0
}
#products .earyBox .parts .gear2 {
    left: 0;
    top: 90px
}
#products .earyBox .parts .gear3 {
    left: 60px;
    top: 0
}
#products .earyBox .parts .gear4 {
    left: 140px;
    top: 45px
}
#products .storeBox {
    position: relative;
    margin-top: 40px;
    padding-top: 50px;
    overflow: hidden
}
#products .storeBox .innerbox {
    width: 1200px;
    margin: 0 auto 0 auto
}
#products .storeBox .lsts {
    overflow: hidden;
    -webkit-transform: translate(40px, 0);
    -ms-transform: translate(40px, 0);
    transform: translate(40px, 0)
}
#products .storeBox .itemOne {
    float: left;
    width: 360px;
    margin: 0 40px 40px 0;
    padding: 23px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #7c7777
}
#products .storeBox .itemOne .storeName:hover {
    opacity: 0.7
}
#products .storeBox .itemOne .image {
    margin-top: 23px
}
#products .storeBox .itemOne .itemName {
    padding: 23px 0 7px 0;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
    color: #e70000;
    text-align: center
}
#products .storeBox .itemOne .btns {
    display: none;
    overflow: hidden
}
#products .storeBox .itemOne .btns li {
    margin-top: 16px
}
#products .storeBox .itemOne .btns li:nth-child(odd) {
    float: left
}
#products .storeBox .itemOne .btns li:nth-child(even) {
    float: right
}
#products .storeBox .itemOne .btns li:hover {
    opacity: 0.6
}
#products .storeBox .parts {
    right: -100px;
    top: 0
}
#products .storeBox .parts .gear1 {
    left: 0;
    top: 80px
}
#products .storeBox .parts .gear2 {
    left: 50px;
    top: 90px
}
#products .storeBox .parts .gear3 {
    left: 110px;
    top: 0
}
#products .boxSuper {
    opacity: 0;
    -webkit-transform: translate(0, 70px);
    -ms-transform: translate(0, 70px);
    transform: translate(0, 70px)
}
#trailer {
    background: #000
}
#trailer .prayerIframe {
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: 100%
}