.openingWrap {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2000
}
.openingWrap {
    display:flex;
    justify-content:center;
    align-items:center;
    background:url(../../../../../core_sys/images/main/top/opening_bg.jpg) center/1100px no-repeat, #280101;
    animation:bright 2s ease 0s infinite alternate
}
@keyframes bright {
    0% {
        filter:brightness(1)
    }
    100% {
        filter:brightness(1.5)
    }
}
.micTextButton {
    width:80%;
    max-width:1000px;
    display:none;
    padding-top:50vh;
    transition:.5s filter;
    animation:micTest 1s cubic-bezier(.35, .01, .68, 1.01) infinite alternate
}
@keyframes micTest {
    0% {
        transform:translate3d(0, -10px, 0)
    }
    100% {
        transform:translate3d(0, 0, 0)
    }
}
.micTextButton:hover {
    filter:drop-shadow(0 0 20px rgba(255, 255, 255, 1))
}
.wrapper {
    background:url(../../../../../core_sys/images/main/top/bg.jpg) top left/auto 50% no-repeat;
    overflow:hidden
}
@media screen and (min-width:900px) {
    .wrapper {
        background-size:cover
    }
}
.wrapper__inner {
    max-width:1300px;
    margin:0 auto;
    position:relative;
    min-height:1146px
}
.logo {
    position:relative;
    margin:0;
    height:calc(100vw * 374 / 628);
    max-height:374px
}
.logo::before {
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:calc(496px - 613px);
    width:100vw;
    max-width:628px;
    height:calc(100vw * 374 / 628);
    max-height:374px;
    background:url(../../../../../core_sys/images/main/top/logo_bg.png) top left/contain no-repeat
}
@media screen and (max-width:899px) {
    .logo::before {
        left:-90px;
        min-width:375px
    }
}
.logo img {
    position:relative;
    z-index:10;
    max-width:60%
}
@media screen and (max-width:899px) {
    .navWrap {
        display:flex;
        flex-direction:column-reverse
    }
}
.twitterArea {
    position:relative;
    z-index:10;
    width:100%;
    max-width:245px;
    height:calc(245px * 573 / 348);
    background:url(../../../../../core_sys/images/main/top/twitter_bg.png) top left/contain no-repeat;
    padding:50px 10px 0
}
@media screen and (max-width:899px) {
    .twitterArea {
        margin:0 auto
    }
}
.GlobalNav {
    position:relative;
    z-index:10;
    display:inline-block
}
.GlobalNav__list {
    display:flex
}
@media screen and (max-width:899px) {
    .GlobalNav {
        display:block;
        margin:0 0 30px
    }
    .GlobalNav__list {
        justify-content:center
    }
    .GlobalNav__list>li {
        width:84px;
        margin:0 5px
    }
}
@media screen and (max-width:899px) {
    .charaWrap {
        position:relative;
        margin-top:-120px;
        padding-bottom:50px
    }
}
@media screen and (min-width:900px) {
    .charaWrap {
        position:absolute;
        top:0;
        right:0;
        z-index:0
    }
}
.charaArea {
    width:calc(80vw * 1097/1128);
    max-width:1097px;
    height:calc(80vw * 1128/1097);
    max-height:1128px;
    position:relative;
    z-index:0
}
@media screen and (max-width:899px) {
    .charaArea {
        width:140vw;
        height:calc(140vw * 1128/1097);
        margin-left:-25vw
    }
}
.charaSvg {
    max-width:100%;
    height:auto;
    position:absolute;
    top:0;
    transition:.5s;
    pointer-events:none;
    opacity:0
}
.is-open .charaSvg#cocoa {
    animation:openingCocoa 2s ease 0s 1 both
}
@keyframes openingCocoa {
    0% {
        opacity:0;
        transform:scale(1)
    }
    50% {
        opacity:1;
        transform:scale(1.4)
    }
    100% {
        opacity:1;
        transform:scale(1)
    }
}
.is-open .charaSvg#rize {
    animation:openingRize 1s ease 4s 1 both
}
@keyframes openingRize {
    0% {
        opacity:0;
        transform:scale(.8) translate(-20%, 10%)
    }
    100% {
        opacity:1;
        transform:scale(1) translate(0)
    }
}
.is-open .charaSvg#chino {
    opacity:1;
    animation:openingChino 1s ease 2s 1 both
}
@keyframes openingChino {
    0% {
        opacity:0;
        transform:scale(.8) translate(20%, 10%)
    }
    100% {
        opacity:1;
        transform:scale(1) translate(0)
    }
}
.charaSvg#chino {
    width:calc(100% * 639 / 1097)
}
.charaSvg#cocoa {
    width:calc(100% * 468 / 1097);
    top:calc(100% * 158 / 1128);
    left:calc(100% * 346 / 1097);
    z-index:1
}
.charaSvg#rize {
    width:calc(100% * 587 / 1097);
    left:calc(100% * 520 / 1097)
}
.charaSvg image {
    pointer-events:none;
    transition:.5s;
    position:relative
}
.charaPath {
    fill:transparent;
    fill-rule:evenodd;
    cursor:pointer;
    pointer-events:auto
}
.charaSvg.is-active {
    z-index:5;
    filter:drop-shadow(0 0 4px #fff04e)
}
.charaSvg.is-inactive {
    filter:brightness(.5) drop-shadow(0 0 4px #fff)
}
@media screen and (min-width:900px) {
    .charaSvg:hover {
        filter:brightness(1) drop-shadow(0 0 4px #fff04e)
    }
}
.unitComment {
    display:none;
    pointer-events:none;
    position:absolute
}
@media screen and (max-width:899px) {
    .unitComment {
        width:90vw;
        bottom:50px;
        right:0;
        left:0;
        margin:0 auto
    }
}
@media screen and (min-width:900px) {
    .unitComment {
        bottom:10vw;
        right:20px
    }
}
.copyrights {
    font-size:1rem;
    padding:1em
}
@media screen and (min-width:900px) {
    .copyrights {
        position:absolute;
        bottom:0;
        left:0;
        font-size:1rem;
        margin:0
    }
}