@charset "UTF-8";
*,
*:before,
*:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

li {
    list-style: none;
}

#contents img {
    pointer-events: none;
}

header#sqexHeader-black_rsp {
    position: relative;
    z-index: 99;
}

#contents {
    background-color: #000;
    position: relative;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.hum__wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: #000;
    padding: 6.25vw 8.333vw;
    z-index: 100;
    overflow: scroll;
}

.hum__button {
    position: fixed;
    top: calc(37px + 1.66vw);
    right: 2.08vw;
    height: 26px;
    width: 50px;
    cursor: pointer;
    z-index: 101;
}

.hum-txt__img {
    height: 0.75vw;
}

.hum__line--white {
    background-color: #fff !important;
}

.hum__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: 0.3s;
}

.hum__line--top {
    position: absolute;
    top: 1px;
    left: 0;
}

.hum__line--middle {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.hum__line--under {
    position: absolute;
    bottom: 1px;
    left: 0;
}

.hum__line.open {
    background-color: #fff;
}

.hum__line--middle.open {
    opacity: 0;
}

.hum__line--top.open {
    transform: rotate(27deg);
    transform-origin: center left;
}

.hum__line--under.open {
    transform: rotate(-27deg);
    transform-origin: center left;
}

.hum__link {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.hum__link--nolink {
    opacity: 1 !important;
    cursor: unset;
}

.hum-media {
    margin-bottom: 2.083vw;
}

.hum-media__link {
    display: inline-block;
    margin-right: 1.166vw;
    width: 1.83vw;
}

.hum-media__img {
    width: 100%;
}

.hum__img {
    height: 7.58vw;
    width: auto;
}

.hum__img--first {
    height: 45px
}

.hum__img--second {
    height: 35.5px;
}

.hum__img--third {
    height: 46px;
}

.hum__img--fourth {
    height: 36px;
}

.hum__img--fifth {
    height: 45.5px;
}

.hum__img--sixth {
    height: 36px;
}

.hum__item--first {
    margin-top: 37.5px;
    margin-bottom: 18.5px;
}

.hum__item--second {
    margin-bottom: 22px;
}

.hum__item--third {
    margin-bottom: 14.5px;
}

.hum__item--fourth {
    margin-bottom: 23.5px;
}

.hum__item--fifth {
    margin-bottom: 14.5px;
}
.hum-bnr {
    width: 260px;
    margin-top: 80px;
    display: block;
}
.hum-bnr__img {
    width: 100%;
    height: auto;
}
.fv {
    position: relative;
}

.fv__img {
    width: 100%;
    vertical-align: bottom;
    animation-delay: 1.2s;
    animation-duration: 1s;
    transition: 0.3s;
    opacity: 0;
}

.fv__img.animated {
    opacity: 1;
}

.fv__logo {
    width: 100%;
}

.fv__img--sp {
    display: none;
}

.fv__ttl {
    width: 27.5vw;
    position: absolute;
    right: 5.33vw;
    top: 6.33vw;
    z-index: 1;
    animation-delay: 3s;
    transition: 0.3s;
    opacity: 0;
}

.fv__ttl.animated {
    opacity: 1;
}

.fv-txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7.2vw;
    z-index: 2;
    text-align: center;
}

.fv-txt__label {
    width: 57vw;
    display: block;
    margin: auto;
    animation-delay: 3s;
    transition: 0.3s;
    opacity: 0;
}

.fv-txt__label.animated {
    opacity: 1;
}

.modal-inline {
    /* width: 23.8vw;
    display: block;
    margin: 2.95vw auto 0; */
    animation-delay: 3.2s;
    transition: 0.3s;
    opacity: 0;
}

.modal-inline.animated {
    opacity: 1;
}

.fv-bottom {
    display: none;
}

.fv-bottom__wrap {
    animation: fv-opacity 10s linear infinite;
    transition: 0.3s;
    opacity: 1;
}

.fv__comment {
    cursor: pointer;
}

@keyframes fv-opacity {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.fv-bottom__inner {
    width: 100%;
    height: 40vw;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../img/fv-under.png);
    background-size: cover;
    background-repeat: repeat-x;
    background-position: top 0%;
    z-index: 1;
    animation: fv-sand 300s linear infinite;
}

@keyframes fv-sand {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -10000px 0;
    }
}

.pre-registration {
    display: inline-block;
    width: 6.75vw;
    top: 0;
    left: 0;
    z-index: 5;
    transition: 0.3s;
    animation-delay: 3s;
    opacity: 0;
}

.pre-registration.animated {
    opacity: 1;
}

.pre-registration:hover {
    opacity: 0.75;
}

.pre-registration__img {
    width: 100%;
}

.video {
    position: relative;
}

.video__inner {
    display: block;
    width: 100%;
    height: 38.3vw;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.video__back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.75;
    z-index: 1;
    transition: 0.3s;
}

.video__inner:hover .video__back {
    opacity: 0;
}

.video__arrow {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.video__arrow:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/video-inner.png) center center no-repeat;
    background-size: 80px 80px;
    transition: 0.3s;
}

.video__inner:hover .video__arrow:before {
    transform: scale(1.2);
    opacity: 0;
}

.video__content,
#ytplayer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 56.25vw;
}

.video-button {
    position: absolute;
    right: 8.375vw;
    bottom: 2.16vw;
    z-index: 2;
}

.video-button__link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.video-button__arrow {
    width: 0.75vw;
    height: 1.375vw;
    margin-left: 1.083vw;
}

#pass {
    fill: #fff;
    transition: 0.3s;
}

.video-button__link:hover #pass {
    fill: #B40909;
}

.modal-inline-wrap {
    transition: 0.3s;
    display: inline-block;
}

.modal-inline-wrap:hover {
    opacity: 0.5;
}

.modal-inline__img {
    width: 100%;
}

.intro {
    text-align: center;
    padding: 11.8vw 0 16.6vw;
    background-image: url(../img/intro-img1.jpg);
    background-size: auto 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    color: #fff;
}

.intro__label {
    width: 45.1vw;
}

.intro__detail {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: 1.66vw;
    line-height: 1em;
    margin-top: 5.8vw;
}

.dash {
    letter-spacing: -0.1em;
}

.character {
    padding: 16.25vw 0 12.9vw;
    background-image: url(../img/character-img.jpg);
    background-color: #000;
    text-align: center;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.character__ttl {
    margin-bottom: 9.916vw;
}

.character__label {
    width: 38.6vw;
}

.character__ver-label {
    width: 8.46vw;
}

.character-more {
    margin-top: 3.75vw;
    padding: 2.08vw 10.4vw;
    border-radius: 150px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s;
}

.character-more__coming {
    width: 74%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.character-more:hover {
    /* border: 2px solid #B40909;
    background: #B40909; */
    /* opacity: 0.5; */
}

.character-more__txt {
    font-size: 2vw;
    color: #fff;
    transition: 0.3s;
}

.system-more__txt img,
.character-more__txt img {
    width: 6.083vw;
}

.character-more__arrow {
    width: 0.75vw;
    height: 1.375vw;
    margin-left: 1.083vw;
}

#pass2 {
    fill: #fff;
    transition: 0.3s;
}


/* .character-more:hover #pass2 {
    fill: #B40909;
}

.character-more:hover .character-more__txt {
    color: #B40909;
} */

.system {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 16vw 0;
    margin: 4.166vw 0;
}

.system__top {
    position: absolute;
    height: calc(100% / 3 - 30px);
    width: 100%;
    left: 0;
    top: 0;
    -webkit-animation: bg-slider 46s linear infinite;
    animation: bg-slider 46s linear infinite;
    background: url(../img/system-top.png) repeat-x 50%;
    background-size: auto 100%;
}

@-webkit-keyframes bg-slider {
    0% {
        background-position: 0 0
    }
    to {
        background-position: -4840px 0
    }
}

@keyframes bg-slider {
    0% {
        background-position: 0 0
    }
    to {
        background-position: -4840px 0
    }
}

.system__middle {
    position: absolute;
    height: calc(100% / 3 - 30px);
    width: 100%;
    left: 0;
    top: calc(100% / 3);
    -webkit-animation: bg-slider-middle 46s linear infinite;
    animation: bg-slider-middle 46s linear infinite;
    background: url(../img/system-middle.png) repeat-x 50%;
    background-size: auto 100%;
}

@-webkit-keyframes bg-slider-middle {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 4840px 0
    }
}

@keyframes bg-slider-middle {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 4840px 0
    }
}

.system__under {
    position: absolute;
    height: calc(100% / 3);
    width: 100%;
    left: 0;
    bottom: 0;
    -webkit-animation: bg-slider 46s linear infinite;
    animation: bg-slider 46s linear infinite;
    background: url(../img/system-under.png) repeat-x 50%;
    background-size: auto 100%;
}

.system__label {
    width: 28.66vw;
    margin-bottom: 7.5vw;
    position: relative;
    z-index: 1;
}

.system__ver-label {
    width: 18vw;
    position: relative;
    z-index: 1;
}

.system-more {
    margin-top: 10.83vw;
    padding: 2.08vw 10.4vw;
    border-radius: 150px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.system-more:hover {
    opacity: 0.5;
}

.character-page__content {
    outline: none;
}

.character-page__container {
    animation-delay: 0.3s;
}

.system-more__txt {
    font-size: 2vw;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: bold;
    transition: 0.3s;
}

.system-more__arrow {
    width: 0.791vw;
    margin-left: 1.25vw;
}

.media {
    padding: 12.08vw 0 12.5vw;
    background-image: url(../img/twitter-back.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.media__wrap {
    width: 50vw;
    margin: auto;
    border: 2px solid #000;
    height: 37.33vw;
    overflow-y: scroll;
    text-align: center;
}

.media__bottom {
    width: 50vw;
    margin: auto;
}

.media__label {
    width: 25.86vw;
}

.media__ttl {
    margin-bottom: 6.79vw;
}

.twitter-timeline {
    width: 100% !important;
    background-color: #fff;
}

.bottom {
    text-align: center;
    color: #fff;
    padding: 8vw 0;
    border-top: 1px solid #ffffff;
}

.bottom__icon {
    text-align: center;
    margin-bottom: 4.5vw;
}

.bottom__logo {
    width: 26.25vw;
}

.bottom__link {
    display: inline-block;
}

.bottom__info {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: 1.166vw;
    line-height: 2em;
}

.bottom__nav {
    margin-top: 6.3vw;
}

.bottom__banar {
    width: 21vw;
    display: inline-block;
    margin: 0 1.66vw 3.32vw;
    line-height: 1.0;
    font-size: 0;
}

.bottom__img {
    width: 100%;
}

.progress {
    background: #000;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.progress__img {
    width: 300px;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

.comment-modal,
.exam-modal,
.c50words-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    z-index: 9999;
    display: none;
}

.comment-modal__content,
.exam-modal__content,
.c50words-modal__content {
    width: 66.66%;
    max-width: 1200px;
    max-height: 80vh;
    overflow: scroll;
    overflow: visible;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
    background: #000;
}

.comment-modal__label,
.exam-modal__label,
.c50words-modal__label {
    padding-bottom: 15px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    color: #B40909;
    font-size: 24px;
    border-bottom: 1px solid #B40909;
}

.comment-modal__detail,
.exam-modal__detail,
.c50words-modal__detail {
    font-size: 16px;
    letter-spacing: 0.07em;
    line-height: 2;
    color: #fff;
}

.comment-modal__close,
.pre-modal__close,
.song-modal__close,
.exam-modal__close,
.c50words-modal__close {
    position: fixed;
    top: calc(37px + 1.66vw);
    right: 2.08vw;
    height: 26px;
    width: 50px;
    cursor: pointer;
    z-index: 101;
}

.comment-modal__line,
.pre-modal__line,
.song-modal__line,
.exam-modal__line,
.c50words-modal__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: 0.3s;
    transform-origin: center left;
}

.comment-modal__line--top,
.pre-modal__line--top,
.song-modal__line--top,
.exam-modal__line--top,
.c50words-modal__line--top {
    position: absolute;
    top: 1px;
    left: 0;
    transform: rotate(27deg);
}

.comment-modal__line--middle,
.pre-modal__line--middle,
.song-modal__line--middle,
.exam-modal__line--middle,
.c50words-modal__line--middle {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    opacity: 0;
}

.comment-modal__line--under,
.pre-modal__line--under,
.song-modal__line--under,
.exam-modal__line--under,
.c50words-modal__line--under {
    position: absolute;
    bottom: 1px;
    left: 0;
    transform: rotate(-27deg);
}

.comment-modal__img {
    width: 100%;
}

.comment-modal__img--sp {
    display: none;
}

.video-modal,
.pre-modal,
.song-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
}

.video-modal__content {
    width: 100%;
    max-width: 900px;
    height: 0;
    height: 56.25vw;
    max-height: 506.25px;
    overflow: visible;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.pre-modal__content {
    overflow: visible;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    height: 80vh;
}

.song-modal__content {
    overflow: scroll;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    padding: 50px 0 100px;
    text-align: center;
    width: 100%;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.song-modal__content::-webkit-scrollbar {
	display: none;
}

.pre-modal__img {
    width: auto;
    height: 100%;
}

.song-modal__img--sp {
    display: none;
}

.song-modal__img {
    width: 61vw;
}
.song-modal__group {
    display: flex;
    justify-content: space-between;
    width: 54.833vw;
    margin: auto;
}
.song-modal__youtube {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4.166666vw;
}
.song-modal__mv {
	position: relative;
	width: 26.666666vw;
	height: auto;
	line-height: 1;
}
.song-modal__mv span {
	display: block;
	background-color: #000;
    position: relative;
}
.song-modal__mv img {
	width: 100%;
	height: auto;
	opacity: 0.5;
	transition: 0.3s;
}
.song-modal__mv span:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/video-inner.png) center center no-repeat;
    background-size: 3.333333vw 3.333333vw;
    transition: 0.3s;
    z-index: 50;
}
.song-modal__mv a {
	display: block;
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
}
.song-modal__mv figcaption {
	padding-top: 0.833333vw;
	font-family: 'Noto Serif JP', serif;
	color: #fff;
	font-size: 1.333vw;
	letter-spacing: 0.12em;
	line-height: 1;
}

.song-modal__mv:hover span:before {
    transform: scale(1.2);
    opacity: 0;
}
.song-modal__mv:hover img {
    opacity: 1;
}
.song-modal__teaser {
	margin: 6.666666vw auto 0;
	width: 54.833vw;
	border: 1px solid #b40000;
	padding: 2.292vw 0 2.125vw;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	line-height: 1;
	background-color: rgba(0, 0, 0, 0.5);
}
.song-modal__teaser strong {
	padding-bottom: 0.833333vw;
	font-size: 1.667vw;
    font-weight: normal;
	color: #b40000;
	display: block;
	letter-spacing: 0.07em;
}
.song-modal__teaser a {
	font-size: 1.167vw;
	letter-spacing: 0.12em;
	color: #fff;
	text-decoration: none;
}
.song-modal__teaser a:hover {
	text-decoration: underline;
}


.video-modal__video {
    width: 100%;
    height: 100%;
}

.video-modal__close {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 43px;
    height: 43px;
    cursor: pointer;
}

.video-modal__close::before {
    position: absolute;
    bottom: 0;
    right: 0;
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: #fff;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    transform-origin: right;
}

.video-modal__close::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-color: #fff;
    -webkit-transform: rotateZ(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotateZ(-45deg);
    transform-origin: right;
}

@-webkit-keyframes flip {
    from {
        opacity: 0;
        transform: translate(-50%, -50%), scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%), scale(1);
    }
}

@keyframes flip {
    from {
        transform: 0;
        transform: translate(-50%, -50%), scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%), scale(1);
    }
}

.movie {
    background-image: url(../img/movie-back.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    background-color: #fff;
    text-align: center;
    padding: 3.458vw 0 17.5vw;
}

.movie__label {
    width: 22.3vw;
}

.movie__wrap {
    width: 90%;
    max-width: 998px;
    margin: 4.79vw auto 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

.movie-content {
    width: 32%;
    margin-bottom: 5.333333vw;
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
}

.movie-content--empty {
    margin: 0 !important;
}

.movie-content__thum {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    height: 196px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.movie-content__label {
	padding-top: 5px;
	font-size: 13px;
}

.movie__back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    left: 0;
    top: 0;
    transition: 0.3s;
}

.movie-content__thum:hover .movie__back {
    background-color: rgba(0, 0, 0, 0);
}

.movie__arrow {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.movie__arrow:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/video-inner.png) center center no-repeat;
    background-size: 40px 40px;
    transition: 0.3s;
}

.movie-content__thum:hover .movie__arrow:before {
    transform: scale(1.2);
    opacity: 0;
}

.pre {
    background-image: url(../img/pre-back.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 6.58vw 0 18.2vw;
    text-align: center;
}

.pre__label {
    width: 56.08vw;
}

.pre__nav {
    display: flex;
    justify-content: center;
}

.pre__nav:nth-of-type(1){
    margin-top: 4vw;
}

.pre__link {
    display: inline-block;
    margin: 0 2.042vw;
}

.pre__media {
    width: 14.3vw;
}

.pre__txt {
    margin-top: 4.33vw;
}

.pre__catch {
    width: 62.3vw;
}

.pre__wrap {
    margin-top: 3.62vw;
    width: 68.25vw;
    max-width: 1200px;
    margin: 3.62vw auto 0;
}

.pre__content {
    margin-bottom: 2.083vw;
    position: relative;
}

.clear {
    width: 32.72%;
    position: absolute;
    left: -6.043%;
    top: 50%;
    transform: translateY(-50%);
}

.pre__content::before {
    display: inline-block;
    content: "";
    width: 3.33vw;
    height: 3.33vw;
    background-image: url(../img/plus.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: calc(100% + 1.0415vw);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.pre__content--last {
    margin-bottom: 0 !important;
}

.pre__content--last::before {
    display: none;
}

.pre__item {
    width: 100%;
    vertical-align: bottom;
}

.pre__button {
    width: 12.3%;
    position: absolute;
    right: 1.5%;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.pre__inner-img {
    width: 100%;
}

.pre__memo {
    text-align: right;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 2.66vw;
    font-size: 1.166vw;
}

.pre-note {
    width: 70vw;
    margin: 9.5vw auto 0;
}

.pre-note__wrap {
    position: relative;
}

.pre-note__wrap::before {
    width: 100%;
    content: "";
    height: 2px;
    background: #000;
    position: absolute;
    top: calc(50% - 4px);
    left: 0;
}

.pre-note__wrap::after {
    width: 100%;
    content: "";
    height: 2px;
    background: #000;
    position: absolute;
    top: calc(50% + 3px);
    left: 0;
}

.pre-note__label {
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.83vw;
    background-color: #B40909;
    position: relative;
    z-index: 1;
}

.pre-note__list {
    font-size: 1.16vw;
    line-height: 2.07em;
    margin-top: 3.29vw;
    text-align: left;
}

.pre__catch--sp {
    display: none;
}

.system-page {
    text-align: center;
    padding: 6.7vw 0 18.75vw;
    background-image: url(../img/system-back.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.system-page__wrap {
    margin-top: 10vw
}

.system-page__content {
    margin-bottom: 8vw;
    text-align: left;
}

.system-page__slick-wrap {
    position: relative;
}

.system-page__left {
    position: absolute;
    width: 3.166vw;
    right: 84.33vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}

.system-page__right {
    position: absolute;
    left: 84.33vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3.166vw;
    cursor: pointer;
}

.system-page__left img,
.system-page__right img {
    width: 100%;
}

.system-page__item {
    transform: translateX(-48.5%);
    transition: 0.3s;
    position: relative;
    border: 2px solid #B40909;
    margin: 0 3.02vw;
}

.system-page__item.slick-current {
    opacity: 1;
}

.system-page__text {
    width: 66.6vw;
    margin: auto;
}

.system-page__ttl {
    margin-bottom: 2vw;
}

.system-page__label {
    height: 4.625vw;
    width: auto;
}

.system-page__detail {
    color: #fff;
    font-size: 1.33vw;
    line-height: 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.system-page__img {
    width: 100%;
}

.system-page__note {
    text-align: right;
    font-size: 1.166vw;
    color: #fff;
    width: 66.7vw;
    margin: auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.system-page__soon {
    text-align: center;
    font-size: 2.833vw;
    color: #fff;
    margin: auto;
    margin-top: 15vw;
    width: 17.36vw;
    max-width: 416.83px;
}

.system-page__soon img {
    width: 100%;
    vertical-align: bottom;
}

.character-page {
    text-align: center;
    padding: 6.75vw 0 8.66vw;
}

.character-page__wrap {
    margin: auto;
}

.character-page__inner {
    position: relative;
    background-image: url(../img/character-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.character-page__inner--second {
    background-image: url(../img/character-back2.jpg);
}

.character-page__inner--third {
    background-image: url(../img/character-back3.jpg);
}

.character-page__inner--forth {
    background-image: url(../img/character-back4.jpg);
}

.character-page__inner--fifth {
    background-image: url(../img/character-back5.jpg);
}

.character-page__inner--solf {
    background-image: url(../img/character-back6.jpg);
}

.character-page__content {
    position: relative;
}

.character-page__wrap::before {
    content: "";
    width: 83vw;
    display: inline-block;
    background-color: #B40000;
    height: 2px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.character-page__wrap::after {
    content: "";
    width: 83vw;
    display: inline-block;
    background-color: #B40000;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
}

.character-page__text {
    color: #fff;
    width: 41.66vw;
    text-align: left;
    position: absolute;
    left: 14.12%;
    top: 4.5vw;
    transform: translate(0%);
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
}

.character-page__en-name {
    font-size: 1.33vw;
    line-height: 1em;
    margin-bottom: 2.33vw;
}

.character-page__ja-name {
    font-size: 2.66vw;
    line-height: 1em;
    letter-spacing: -0.06em;
    margin-bottom: 1.79vw;
    white-space: nowrap;
}

.character-page__label {
    font-size: 2.66vw;
    color: #B40000;
    line-height: 1em;
    margin-bottom: 5.2vw;
    font-weight: bold;
}

.character-page__img-wrap {
    width: 100%;
    margin-left: auto;
}

.character-page__img {
    width: 100%;
}

.character-page__voice {
    font-size: 2vw;
    margin-bottom: 3.25vw;
    line-height: 1em;
}

.character-page__nav {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 83vw;
    margin: 2.5vw auto 0;
}

.character-page__voice-button {
    width: 2.33vw;
    margin-bottom: 3.083vw;
}

.character-page__voice-inner {
    cursor: pointer;
    display: block;
    position: relative;
}

.character-page__voice-img {
    width: 100%;
}

.character-page__add {
    position: absolute;
    left: calc(100% + 0.958vw);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    color: #fff;
    font-size: 1vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.play {
    opacity: 1;
}

.stop {
    opacity: 0.5;
}

.tab {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    width: calc(50% - 5.33px);
    line-height: 1em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.tab--disable {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    appearance: none;
    cursor: unset;
    width: calc(33.33% - 7.1px);
    color: #fff;
}

.tab-txt {
    font-size: 1.32vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    padding: 1.37vw 0;
    background-color: #1C1B1B;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.13em;
}

.tab-txt.active {
    background-color: #b40000;
}

.tab-er {
    width: calc(50% - 5.33px);
    margin-bottom: 8px;
}

.tab-am {
    width: calc(33.33% - 7.1px);
    margin-bottom: 8px;
}

.tab-oth {
    width: calc(33.33% - 7.1px);
    margin-bottom: 8px;
}

.tab-hm {
    width: calc(50% - 5.33px);
}

.tab-shin {
    width: calc(33.33% - 7.1px);
}

.tab__img {
    vertical-align: bottom;
    width: 100%;
}

.character-page__detail {
    font-size: 1.33vw;
    width: 34.29vw;
    line-height: 2em;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.thum__wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 83vw;
    margin: 3vw auto 0;
}

.thum__wrap .slick-track {
    transform: unset !important;
}

@-webkit-keyframes slideIn {
    from {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes slideOut {
    from {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.character-page__box {
    display: none;
    position: relative;
    opacity: 0;
    -webkit-animation-name: slideOut;
    animation-name: slideOut;
    animation-duration: 1s;
    transition-delay: 1s;
    transition-property: display;
}

.character-page__box.show {
    opacity: 1;
    display: block;
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    animation-duration: 1s;
}

.thum__box {
    display: none;
}

.thum__box.show {
    display: block;
}

.thum__button {
    width: 12.5%;
    cursor: pointer;
    position: relative;
}

.thum__soon {
    width: 12.5%;
    position: relative;
}

.thum__button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    left: 0;
    top: 0;
    z-index: 1;
    transition: 0.3s;
}

.thum__button.thumbnail-current::before {
    background: rgba(0, 0, 0, 0);
}

.thum__img {
    width: 100%;
    vertical-align: bottom;
}

.character-page__left {
    width: 3.16vw;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 3.75vw;
    cursor: pointer;
}

.character-page__right {
    width: 3.16vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.75vw;
    cursor: pointer;
}

.character-page__arrow {
    width: 100%;
}

.pre-note__item {
    padding-left: 1em;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.pre-note__item::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 1.035em;
    transform: translateY(-50%);
}

.pre-note__num-wrap {
    counter-reset: item;
    list-style-type: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.pre-note__num:before {
    counter-increment: item;
    content: counter(item)'.';
    padding-right: .5em;
}

.media__button {
    text-align: right;
    margin-top: 1.5vw;
}

.media__link {
    display: inline-block;
}

.media__txt {
    height: 1.5vw;
    width: auto;
}

.character-page__img--sp {
    display: none !important;
}

.special {
    background-image: url(../img/special-back.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 7.08vw 0 18.2vw;
    text-align: center;
}

.special__wrap {
    margin-top: 8.333vw;
}

.special__ttl-img {
    width: 27.4vw;
}

.special__link {
    transition: 0.3s;
    display: inline-block;
    margin: 0 0.833vw 2vw 0.833vw;
    width: 12.5vw;
    transition-timing-function: ease-in-out;
}

.special__link img {
    width: 100%;
}

.special__box {
    margin-top: 2.5vw;
}

.special__label-img {
    width: 16.83vw;
}

.special__link:hover {
    transform: scale(1.1);
}

.special__br {
    width: 100%;
}

.special__br_sp {
    width: 100%;
    display: none;
}

.character-page__ruby {
    position: relative;
}

.character-page__rt {
    width: 100%;
    font-size: 1.33vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    position: absolute;
    left: 50%;
    bottom: 90%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1em;
    letter-spacing: 0em;
}

.character-page__rt--sc {
    font-size: 1.16vw;
    font-weight: 400;
}

.tab-sp {
    display: none;
}

.cbt {
    padding: 7.083vw 0 13.58vw;
    background-image: url(../img/cbt-back.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
}

.cbt__ttl {
    text-align: center;
}

.cbt__label {
    width: 47.83vw;
}

.cbt__label--guideline {
    width: 39.79vw;
}

.cbt__top {
    margin-bottom: 6.58vw;
}

.cbt__char {
    width: 100%;
    margin-top: -7.45vw;
}

.cbt__char img {
    width: 100%;
}

.cbt-txt {
    text-align: center;
    margin-top: -16.57vw;
}

.cbt-txt__label {
    width: 28.79vw;
}

.cbt-txt__label--guideline {
    width: 44.75vw;
}

.cbt-txt__detail {
    font-size: 1.33vw;
    line-height: 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    margin-top: 3.91vw;
    color: #fff;
    letter-spacing: 0.05em;
}

.cbt-txt__detail--terms {
    text-align: left;
    width: 66.66vw;
    margin: 4.16vw auto 0;
}

.cbt__inner {
    width: 95%;
    margin: 2.29vw 0 0 5%;
}

.cbt-content__num {
    counter-increment: count-ex01;
    padding-left: 1.5em;
    position: relative;
    font-size: 1.33vw;
    line-height: 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.05em;
}

.cbt-content__brackets {
    counter-increment: count-ex01;
    padding-left: 2em;
    line-height: 1.5em;
    position: relative;
    font-size: 1.33vw;
    line-height: 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #fff;
}

.cbt-content__dots {
    padding-left: 1.5em;
    line-height: 1.5em;
    position: relative;
    font-size: 1.33vw;
    line-height: 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #fff;
}

.cbt__inner .cbt-content__dots {
    line-height: 1.5em;
}

.warning {
    margin-top: 2.083vw;
}

.cbt-content__warning {
    padding-left: 1.5em;
    line-height: 1.5em;
    position: relative;
    font-size: 1.33vw;
    line-height: 2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #fff;
}

.cbt-content__num:before {
    content: counter(count-ex01) ".";
    position: absolute;
    top: 0;
    left: 0;
}

.cbt-content__brackets:before {
    content: "("counter(count-ex01)")";
    position: absolute;
    top: 0;
    left: 0;
}

.cbt-content__dots:before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}

.cbt-content__warning::before {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}

.cbt-content {
    width: 66.66vw;
    margin: auto;
    background-color: #200001;
    padding: 3.5vw 2.54vw 5.33vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.cbt-content__label {
    font-size: 2vw;
    color: #ff0000;
    font-weight: 700;
    margin-bottom: 1.5833vw;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
}

.cbt-content__label--terms {
    font-size: 1.83vw;
}

.cbt-content__detail {
    color: #fff;
    font-size: 1.5vw;
    margin-bottom: 7.083vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.cbt-content__detail--guideline {
    margin-bottom: 3.75vw;
    font-size: 1.33vw;
}

.cbt-content__detail--terms {
    font-size: 1.33vw;
    margin-bottom: 4.083vw;
    line-height: 2em;
}

.cbt-content__copy {
    width: 90%;
    margin: 2.083vw auto;
    padding: 2.083vw 1.66vw;
    border: 1px solid #ff0000;
    background-color: #2F0102;
}

.cbt-content__small {
    font-size: 1.16vw;
}

.cbt-content__detail--last {
    margin: 0;
}

.cbt-content__button {
    text-align: center;
    margin-top: 5.625vw;
}

.cbt-content__link {
    display: inline-block;
    padding: 0.416vw 1.75vw 0.416vw 2.41vw;
    background-color: #000;
    text-decoration: none;
    text-align: center;
    color: #ff0000;
    border: 1px solid #ff0000;
    font-size: 1.66vw;
    letter-spacing: 0.07em;
    font-weight: 700;
    line-height: 1.2em;
    font-family: 'Noto Sans JP', sans-serif;
}

.cbt-content__under {
    font-size: 1.16vw;
    font-weight: 500;
    line-height: 1em;
}

.cbt-note {
    margin-top: 9.83vw;
}

.cbt-note__label {
    font-size: 2vw;
    color: #ff0000;
    text-align: center;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin-bottom: 1.458vw;
}

.cbt-note__label--apple {
    margin-top: 4.87vw;
}

.cbt-note__item {
    font-size: 1.166vw;
    color: #fff;
    padding-left: 1em;
    line-height: 2em;
    position: relative;
    letter-spacing: 0.05em;
}

.cbt-note__item::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 1em;
    transform: translateY(-50%);
}

.cbt-note__detail {
    font-size: 1.166vw;
    color: #fff;
    line-height: 2em;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
}

.cbt-nav {
    width: 66.66vw;
    margin: 3.416vw auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cbt-nav__link {
    width: 32%;
    color: #fff;
    background-color: #010000;
    text-decoration: none;
    text-align: center;
    padding: 0.83vw 0;
    font-size: 1.16vw;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 1.5em;
    min-height: 5.138vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbt-content__caution {
    display: block;
    font-size: 1vw;
    padding-left: 1.3em;
    position: relative;
    letter-spacing: 0.15em;
    margin-top: 0.5em;
}

.cbt-content__caution::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0.75em;
    transform: translateY(-50%);
}

.cbt-note__color {
    color: #ff0000;
}

.cbt-note__link {
    color: #fff;
}

.cbt__logo {
    display: none;
}

.fv__cbt {
    margin-top: 1.083vw;
}

.fv__cbt a {
    display: inline-block;
}

.fv__cbt img {
    width: 100%;
}

.cbt__pc-only {
    display: none;
}

.pre-cbt {
    display: none;
}

.cbt__link {
    color: #fff;
}

.fv__cbt--sp {
    display: none;
}

.cbt-content__right {
    text-align: right;
    color: #fff;
    margin-top: 4.083vw;
    font-size: 1.33vw;
}

.cbt-txt__label--sp {
    display: none;
}

.song {
    padding: 12.4vw 0 16.8vw;
    background-color: #272727;
    text-align: center;
}

.song img {
    width: 100%;
}

.song__ttl {
    width: 47%;
    margin: 0 auto 7.5vw;
}

.song__detail {
    width: 34%;
    margin: 0 auto 7.3vw;
}

.song__img {
    width: 37.5%;
    margin: 0 auto 5.33vw;
}

.song__button {
    width: 6.54%;
    cursor: pointer;
    display: inline-block;
    transition: 0.3s;
}

.song__button:hover {
    opacity: 0.7;
}

.song__button img {
    pointer-events: unset !important
}

@media screen and (min-width:1600px) {
    .movie__label {
        width: auto;
        height: 130px;
        margin-bottom: 0;
    }
    .song__ttl {
        width: auto;
    }
    .song__label {
        height: 130px;
        width: auto!important;
    }
    .intro__label {
        width: auto;
        height: 130px;
    }
    .intro__detail {
        font-size: 20px;
        margin-top: 69px;
    }
    .character__ttl {
        margin-bottom: 120px;
    }
    .character__label {
        width: auto;
        height: 130px;
    }
    .character__ver-label {
        width: 150px;
    }
    .system__label {
        width: auto;
        height: 130px;
        margin-bottom: 97px;
    }
    .system__ver-label {
        width: 300px;
    }
    .character-more,
    .system-more {
        margin-top: 140px;
        padding: 30px 170px;
    }
    .media__label {
        width: auto;
        height: 130px;
    }
    .media__ttl {
        margin-bottom: 97px;
    }
    .bottom {
        padding: 200px 0 280px;
    }
    .bottom__icon {
        margin-bottom: 90px;
    }
    .bottom__logo {
        width: 440px;
    }
    .bottom__info {
        font-size: 18px;
    }
    .bottom__nav {
        margin-top: 90px;
    }
    .bottom__banar {
        width: 420px;
        display: inline-block;
        margin: 0 20px 40px;
    }
    .bottom__img {
        width: 100%;
    }
    .pre {
        padding: 200px 0;
    }
    .pre__catch {
        width: 930px;
    }
    .pre__media {
        width: 280px;
    }
    .pre__label {
        width: 730px;
    }
    .pre__txt {
        margin-top: 40px;
    }
    .pre__wrap {
        margin-top: 90px;
    }
    .pre__link {
        margin: 0 30px;
    }
    .pre__memo {
        font-size: 16px;
        margin-top: 45px;
    }
    .pre-note__label {
        font-size: 32px;
    }
    .pre-note {
        margin-top: 80px;
    }
    .pre-note__list {
        font-size: 20px;
        margin-top: 40px;
    }
    .cbt-txt__detail {
        font-size: 24px;
    }
    .cbt-content {
        padding: 60px 45px;
    }
    .cbt-note {
        margin-top: 120px;
    }
    .cbt-content__label {
        font-size: 32px;
        margin-bottom: 30px;
    }
    .cbt-content__detail {
        font-size: 24px;
        margin-bottom: 60px;
    }
    .cbt-content__brackets,
    .cbt-content__num,
    .cbt-content__dots,
    .cbt-content__warning {
        font-size: 24px;
    }
    .cbt-content__detail--last {
        margin: 0;
    }
    .cbt-content__right {
        font-size: 24px;
        margin-top: 60px;
    }
    .cbt-content__button {
        margin-top: 120px;
    }
    .cbt-content__link {
        padding: 10px 48px 10px 52px;
        font-size: 40px;
        display: inline-block;
    }
    .cbt-content__under {
        font-size: 28px;
    }
    .cbt-note__label {
        font-size: 32px;
        margin-bottom: 60px;
    }
    .cbt-note__item {
        font-size: 20px;
    }
    .cbt-note__label--apple {
        margin-top: 90px;
    }
    .cbt-note__detail {
        font-size: 20px;
    }
    .cbt__top {
        margin-bottom: 80px;
    }
    .cbt-txt__detail--terms {
        margin-top: 60px;
    }
    .cbt-nav {
        margin-top: 50px;
    }
    .cbt-nav__link {
        font-size: 20px;
        height: 102.47px;
    }
    .cbt-content__caution {
        font-size: 18px;
    }
    .cbt-content__small {
        font-size: 20px;
    }
}

@media screen and (max-width:1109px) {
    .movie-content__thum {
        height: 17.77vw;
    }
}

.system__label--page {
    margin: 0;
}

@media screen and (max-width:768px) {
    .hum__wrap {
        padding: 12vw 5.2vw;
    }
    .hum__button {
        top: calc(44px + 2.47vw);
        right: 5.208vw;
        width: 58.6px;
        height: 27.7px;
    }
    
    .hum__line--top.open {
        transform: rotate(23deg);
        transform-origin: center left;
    }
    .hum__line--under.open {
        transform: rotate(-23deg);
        transform-origin: center left;
    }
    .hum-media {
        line-height: 1.0;
        margin-bottom: 5.067vw;
        font-size: 0;
    }
    .hum-media__link {
        width: 6.25vw;
        margin-right: 4.42vw;
    }
    .hum-txt {
        line-height: 1.0;
    }
    .hum-txt__img {
        height: 1.95vw;
    }
    .hum__link {
        line-height: 1.0;
    }
    .hum__item {
        font-size: 0;
    }
    .hum__img {
        width: auto;
    }
    .hum__img--first {
        height: 10.667vw;
    }
    .hum__img--second {
        height: 9.067vw;
    }
    .hum__img--third {
        height: 10.933vw;
    }
    .hum__img--fourth {
        height: 8.8vw;
    }
    .hum__img--fifth {
        height: 10.933vw;
    }
    .hum__img--sixth {
        height: 8.8vw;
    }
    .hum__item--first {
        margin-top: 7.467vw;
        margin-bottom: 4.4vw;
    }
    .hum__item--second {
        margin-bottom: 4.267vw;
    }
    .hum__item--third {
        margin-bottom: 3.867vw;
    }
    .hum__item--fourth {
        margin-bottom: 3.6vw;
    }
    .hum__item--fifth {
        margin-bottom: 3.867vw;
    }
    .hum-bnr {
        width: 69.333vw;
        margin: 13.333vw auto 0;
    }
    .fv__img {
        display: none;
    }
    .fv__img--sp {
        display: block;
    }
    .pre-registration {
        width: 10.54vw;
    }
    .fv__ttl {
        width: 45.18vw;
        position: absolute;
        right: 0;
        top: 9.33vw;
        z-index: 1;
    }
    .fv-txt__label {
        width: 75vw;
    }
    .fv-bottom__inner {
        height: 50vh;
    }
    .modal-inline {
        /* width: 61.2vw; */
    }
    .video__inner {
        height: 56.25vw;
    }
    .movie__label,
    .media__label,
    .system__label,
    .character__label,
    .intro__label {
        height: 16.57vw;
        width: auto;
    }
    .intro {
        padding: 18.75vw 0 19.79vw;
    }
    .intro__detail {
        font-size: 3.385vw;
        margin-top: 6.38vw;
    }
    .character {
        padding: 25.3vw 0 20vw;
        background-image: url(../img/character-img-sp.jpg);
    }
    .character__ver-label {
        width: 15.1vw;
    }
    .system-more,
    .character-more {
        margin-top: 10.15vw;
        padding: 3vw 15.88vw;
        border: 1px solid #fff;
    }
    .system {
        padding: 24.2vw 0;
    }
    .system-more__arrow {
        width: 1.3vw;
        margin-left: 1.3vw;
    }
    .system__ver-label {
        width: 28.38vw
    }
    .media {
        padding: 19.1vw 0 24.8vw;
    }
    .media__wrap {
        width: 71.1vw;
        height: 52vw;
    }
    .media__bottom {
        width: 71.1vw;
    }
    .media__txt {
        height: 2.083vw;
    }
    .media__ttl {
        margin-bottom: 7.42vw;
    }
    .bottom {
        padding: 16.53vw 0 28vw;
    }
    .bottom__logo {
        width: 49vw;
    }
    .bottom__icon {
        margin-bottom: 3.9vw;
    }
    .bottom__info {
        font-size: 3.125vw;
    }
    .bottom__banar {
        margin: 0;
        width: 52vw;
        margin-bottom: 7.42vw;
    }
    .bottom__banar--aniv {
        
    }
    .bottom__nav {
        margin-top: 14.32vw;
    }
    .movie {
        text-align: center;
        padding: 7.81vw 0 23.9vw;
    }
    .movie__wrap {
        margin: 8.46vw auto 0;
    }
    .movie-content {
        margin-bottom: 8.46vw;
        width: 100%;
    }
    .movie-content--empty {
        margin: 0 !important;
    }
    .movie-content__thum {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        height: 53.3vw;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
		.movie-content__label {
			padding-top: 1.333333vw;
			font-size: 3.2vw;
		}
    .movie__arrow {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }
    .pre {
        padding: 7.8125vw 0 21.6vw;
    }
    .pre__nav {
        margin-top: 0;
    }
    .pre__nav:nth-of-type(1) {
        margin-top: 7.8125vw;
    }
    .pre__label {
        width: 83.85vw;
    }
    .pre__link {
        margin: 0 0.867vw;
        line-height: 1.0;
    }
    .pre__media {
        width: 22.52vw;
    }
    .pre__txt {
        margin-top: 5.34vw;
    }
    .pre__catch {
        display: none;
    }
    .pre__catch--sp {
        display: block;
        width: 92%;
        margin: auto;
    }
    .pre__wrap {
        width: 100%;
        margin-top: 5.34vw;
    }
    .pre__content {
        margin-bottom: 3.64vw;
    }
    .pre__memo {
        font-size: 3.125vw;
    }
    .pre-note {
        margin-top: 18.35vw;
        width: 92.4%;
    }
    .pre-note__label {
        font-size: 3.64vw;
        padding: 0 10px;
    }
    .pre-note__list {
        font-size: 3.125vw;
        line-height: 2.07em;
        margin-top: 6.5vw;
        text-align: left;
    }
    .system-page__text {
        width: 100%;
    }
    .system-page__content {
        width: 76.4vw;
        margin: 0 auto 9.5vw;
    }
    .system-page__item {
        transform: translateX(0) scale(1) !important;
        margin: 0;
    }
    .system-page__right {
        left: calc(100% + 1.30vw);
        width: 3.64vw;
    }
    .system-page__left {
        right: calc(100% + 1.30vw);
        width: 3.64vw;
    }
    .system-page__label {
        height: 6.38vw;
        width: auto;
    }
    .system-page__detail {
        font-size: 3.64vw;
    }
    .system-page__br {
        display: none;
    }
    .system-page__note {
        text-align: right;
        font-size: 2.864vw;
        color: #fff;
        width: 76.4vw;
        margin: auto;
    }
    .system-page {
        padding: 7.9vw 0 20vw;
    }
    .system-page__soon {
        font-size: 4.68vw;
        margin-top: 30.85vw;
    }
    .comment-modal__content {
        padding: 8vw 2.666666vw;
        max-width: none;
        width: calc(100% - 12px);
    }
    .comment-modal__label {
        margin-bottom: 5.333333vw;
        padding-bottom: 4vw;
        font-size: 5.333333vw;
        letter-spacing: 0.02em;
    }
    .comment-modal__detail {
        font-size: 3.733333vw;
    }
    .video-button__txt,
    .system-more__txt,
    .character-more__txt {
        font-size: 3.13vw;
    }
    .video-button {
        right: 50%;
        transform: translateX(50%);
    }
    .character-more__arrow,
    .system-more__arrow,
    .video-button__arrow {
        width: 1.3vw;
        height: 3.77vw;
        margin-left: 2.21vw;
    }
    .pre-note__wrap::before {
        height: 1px;
        top: calc(50% - 2px);
    }
    .pre-note__wrap::after {
        height: 1px;
        top: calc(50% + 2px);
    }
    .system__top {
        height: calc(100% / 3 - 10px);
        -webkit-animation: bg-slider 90s linear infinite;
        animation: bg-slider 90s linear infinite;
    }
    .system__middle {
        height: calc(100% / 3 - 10px);
        -webkit-animation: bg-slider-middle 90s linear infinite;
        animation: bg-slider-middle 90s linear infinite;
    }
    .system__under {
        -webkit-animation: bg-slider 90s linear infinite;
        animation: bg-slider 90s linear infinite;
    }
    .video-modal__close {
        right: 5px;
    }
    .system-page__soon {
        width: 28.7vw;
    }
    .system-more__txt img,
    .character-more__txt img {
        width: 9.59vw;
    }
    .comment-modal__close,
    .pre-modal__close,
    .song-modal__close {
        top: calc(44px + 2.47vw);
        right: 5.208vw;
        height: 3.7vw;
        width: 7.8125vw;
    }
    .comment-modal__close::before,
    .pre-modal__close::before,
    .song-modal__close::before {
        transform: rotate(-21deg);
        transform-origin: center left;
    }
    .comment-modal__close::after,
    .pre-modal__close::after,
    .song-modal__close::after {
        transform: rotate(21deg);
        transform-origin: center left;
    }
    .song-modal__group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .song-modal__youtube {
	    margin-top: 10.666666vw;
    }
    .song-modal__mv {
			width: 89.333333vw;
		}
		.song-modal__mv:hover img {
			opacity: 0.5;
		}
		.song-modal__mv span:before {
		    background-size: 13.333333vw 13.333333vw;
		}
		.song-modal__mv:hover a:before {
			transform: scale(1);
		    opacity: 1;
		}
		.song-modal__mv figcaption {
			padding-top: 2.666666vw;
			font-size: 3.2vw;
		}
		
		.song-modal__teaser {
			margin: 13.333333vw auto 0;
			width: 89.333333vw;
			padding: 4vw 0;
		}
		.song-modal__teaser strong {
			padding-bottom: 2.4vw;
			font-size: 3.733333vw;
		}
		.song-modal__teaser a {
			font-size: 3.2vw;
		}
		.song-modal__teaser a:hover {
			text-decoration: none;
		}
		
		
    .character-page__item::before {
        width: 5.208vw;
        height: 5.208vw;
        left: 50%;
        top: calc(100% + 1.82vw);
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .comment-modal__img {
        display: none;
    }
    .comment-modal__img--sp {
        display: block;
        width: 100%;
    }
    .character-page__text {
        width: 90%;
        margin: auto;
        position: relative;
        transform: translate(0);
        left: 0;
        top: 0;
        padding: 9.33vw 0 12.4vw;
    }
    .character-page__inner {
        display: flex;
        flex-wrap: wrap;
        background: none;
    }
    .character-page__detail {
        width: 100%;
    }
    .character-page__img-wrap {
        width: 100%;
        order: 1;
        background-image: url(../img/character-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 91.3vw;
        position: relative;
    }
    .character-page__img-wrap--second {
        background-image: url(../img/character-back2.jpg);
    }
    .character-page__img-wrap--third {
        background-image: url(../img/character-back3.jpg);
    }
    .character-page__img-wrap--forth {
        background-image: url(../img/character-back4.jpg);
    }
    .character-page__img-wrap--sc {
        background-image: url(../img/character-back5.jpg);
    }
    .character-page__img-wrap--solf {
        background-image: url(../img/character-back6.jpg);
    }
    .character-page__item::before {
        content: "";
        width: 100%;
        display: inline-block;
        background-color: #B40000;
        height: 1px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .character-page__item::after {
        content: "";
        width: 100%;
        display: inline-block;
        background-color: #B40000;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .character-page__item {
        order: 2;
        position: relative;
    }
    .character-page__wrap::after,
    .character-page__wrap::before {
        display: none;
    }
    .character-page__nav {
        width: 100%;
    }
    .tab {
        width: 100%;
    }
    .thum__wrap {
        width: 100%;
    }
    .thum__soon,
    .thum__button {
        width: 25%;
    }
    .character__label--page {
        height: 13.86vw;
    }
    .character-page__img {
        display: none !important;
    }
    .character-page__img--sp {
        display: block !important;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .character-page__label {
        font-size: 5.066vw;
        margin-bottom: 8.4vw;
    }
    .character-page__en-name {
        font-size: 2.8vw;
        margin-bottom: 3.46vw;
    }
    .character-page__ja-name {
        font-size: 6.4vw;
        margin-bottom: 3.2vw;
    }
    .character-page__voice {
        font-size: 4vw;
    }
    .character-page__voice-button {
        width: 7.46vw;
        margin-bottom: 7.733vw;
    }
    .character-page__detail {
        font-size: 3.733vw;
    }
    .character-page__nav {
        margin-top: 5.3vw;
    }
    .tab {
        margin-bottom: 0.8vw;
    }
    .tab:last-of-type {
        margin: 0;
    }
    .thum__wrap {
        margin-top: 5.33vw;
    }
    .character-page__left {
        width: 5.06vw;
        position: absolute;
        transform: translateY(-50%);
        top: 45.66vw;
        left: 2.66vw;
        cursor: pointer;
    }
    .character-page__right {
        width: 5.06vw;
        position: absolute;
        top: 45.66vw;
        transform: translateY(-50%);
        right: 2.66vw;
        cursor: pointer;
    }
    .clear {
        width: 30%;
        left: -3.6%;
    }
    .pre__content::before {
        width: 5.33vw;
        height: 5.33vw;
        top: calc(100% + 1.82vw);
    }
    .character-page * {
        overflow: visible;
    }
    .character-page {
        width: 100%;
        overflow-x: hidden !important;
    }
    .pre-modal__content {
        height: 60vh;
    }
    .tab-txt {
        font-size: 2.83vw;
        padding: 3.4vw 0;
        background-color: #1C1B1B;
        color: #fff;
    }
    .tab--disable,
    .tab-am,
    .tab-hm,
    .tab-shin,
    .tab-oth {
        width: calc(50% - 4px);
        margin-bottom: 0;
    }
    .tab-er,
    .tab-am,
    .tab-hm,
    .tab-shin,
    .tab-oth {
        margin-bottom: 6px;
    }
    .special {
        background-image: url(../img/special-back-sp.png);
        padding: 9.73vw 0 18.2vw;
    }
    .special__wrap {
        margin-top: 12.53vw;
    }
    .special__ttl-img {
        width: 44.76vw;
    }
    .special__link {
        margin: 0 1.2vw 2vw 1.2vw;
        width: 26.95vw;
    }
    .special__box {
        margin-top: 4vw;
    }
    .special__label-img {
        width: 26.95vw;
    }
    .comment-modal__line--top,
    .pre-modal__line--top,
    .song-modal__line--top {
        transform: rotate(23deg);
        transform-origin: center left;
    }
    .comment-modal__line--under,
    .pre-modal__line--under,
    .song-modal__line--under {
        transform: rotate(-23deg);
        transform-origin: center left;
    }
    .special__link {
        transform: scale(1) !important;
    }
    .character-page__rt {
        font-size: 2.666666vw;
    }
    .character-page__ja-name {
        white-space: normal;
        line-height: 1.2em;
    }
    .tab__img {
        display: none;
    }
    .tab-sp {
        display: block;
    }
    .character-page {
        padding-bottom: 27.9vw;
    }
    .character-page__add {
        left: calc(100% + 4vw);
        font-size: 2.66vw;
        letter-spacing: 0.15em;
    }
    .cbt {
        background-image: url(../img/cbt-back-sp.png);
    }
    .cbt__char-img {
        display: none;
    }
    .cbt__logo {
        display: block;
    }
    .cbt__char {
        width: 55.73%;
        margin: 3.2vw auto 0;
    }
    .cbt__label {
        width: 76.6vw;
    }
    .cbt__top {
        margin-bottom: 12vw;
    }
    .cbt-txt {
        margin-top: 4.4vw;
    }
    .cbt-txt__label {
        width: 67.6vw;
    }
    .cbt-txt__detail {
        font-size: 3.73vw;
        margin: 8.13vw auto 0;
        width: 90%;
        line-height: 1.5em;
    }
    .cbt-content {
        width: 95%;
        padding: 8vw 2.66vw;
    }
    .cbt-content__label {
        font-size: 5.33vw;
        margin-bottom: 1vw;
    }
    .cbt-content__detail {
        font-size: 4.26vw;
        margin-bottom: 8.66vw;
        line-height: 1.5em;
    }
    .cbt-content__label--terms {
        font-size: 4.8vw;
    }
    .cbt-content__detail--terms,
    .cbt-content__detail--guideline {
        font-size: 3.2vw;
        line-height: 2em;
    }
    .cbt-content__brackets,
    .cbt-content__num,
    .cbt-content__dots,
    .cbt-content__warning {
        font-size: 3.2vw;
    }
    .cbt__inner .cbt-content__dots {
        line-height: 2em;
    }
    .cbt-content__detail--last {
        margin: 0;
    }
    .cbt-content__line {
        display: inline-block;
    }
    .cbt-note__item {
        font-size: 3.2vw;
    }
    .cbt-note__detail {
        font-size: 3.2vw;
    }
    .cbt-content__copy {
        width: 100%;
        font-size: 3.2vw;
    }
    .cbt-content__button {
        margin-top: 9.46vw;
    }
    .cbt-content__link {
        font-size: 3.73vw;
        padding: 0.933vw 2.66vw 0.933vw 4.8vw;
    }
    .cbt__inner {
        width: 96%;
    }
    .cbt-note__label {
        font-size: 6.133vw;
    }
    .cbt-note__line {
        display: inline-block;
    }
    .cbt-nav {
        margin-top: 9.73vw;
        width: 90%;
        flex-wrap: wrap;
    }
    .cbt-nav__link {
        width: 100%;
        margin-bottom: 2.53vw;
        font-size: 3.733vw;
        padding: 3.2vw 0;
    }
    .cbt-nav__pc-only {
        display: none;
    }
    .cbt-note__label--apple {
        margin-top: 11vw;
    }
    .cbt-content__caution,
    .cbt-content__small {
        font-size: 2.66vw;
        line-height: 1.5em;
        word-break: break-all;
    }
    .cbt__pc-only {
        display: block;
    }
    .fv__cbt {
        display: none;
    }
    .fv__cbt--sp {
        width: 64vw;
        margin: 0 auto 4.93vw;
        display: block;
        animation-delay: 3s;
        transition: 0.3s;
        opacity: 0;
    }
    .fv__cbt--sp.animated {
        opacity: 1;
    }
    .cbt-txt__label--pc {
        display: none;
    }
    .cbt-txt__label--sp {
        display: block;
        width: 80%;
        margin: auto;
    }
    .cbt-content__right {
        margin-top: 5.73vw;
        font-size: 3.2vw;
    }
    .song {
        padding: 19.8vw 0 16.8vw;
    }
    .song-modal__img {
        display: none;
    }
    .song-modal__img--sp {
        display: block;
    }
    .song-modal__img {
        width: 75%;
        margin: auto;
    }
    .song__ttl {
        width: 75%;
        margin: 0 auto 11.5vw;
    }
    .song__detail {
        width: 63%;
        margin: 0 auto 9.6vw;
    }
    .song__img {
        width: 60.5%;
        margin: 0 auto 12.8vw;
    }
    .song__button {
        width: 16.9%;
    }
    .song-modal__content {
        width: 100%;
    }
    .cbt-content__under {
        font-size: 2.66vw;
    }
    .special__br {
        display: none;
    }
    .special__br_sp {
        display: block;
    }
}

@media screen and (max-width:480px) {
    .hum__button,
    .pre-modal__close,
    .song-modal__close,
    .comment-modal__close {
        width: 29.3px;
        height: 15.5px;
    }
}

.special__link {
    opacity: 0;
}
.special__link img {
    transition: 0.3s;
    pointer-events: auto !important;
}
.special__link img:hover {
    transform: scale(1.1);
}
@media screen and (max-width: 768px) {
.special__link img:hover {
    transform: scale(1);
}
}