@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&family=Nanum+Gothic:wght@700&display=swap);

::selection {
    color: #fff;
    background: #557
}

*,
:after,
:before {
    box-sizing: border-box
}

:focus {
    outline: 0
}

body,
html {
    font-size: 62.5%;
    color: #557;
    background-color: #fff;
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif
}

body {
    width: 100%
}

body.js-no-scroll {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden
}

a {
    color: #557;
    text-decoration: none
}

h1,
h2,
h3 {
    line-height: 1
}

li,
ul {
    list-style: none
}

td,
th,
tr {
    font-weight: 400;
    text-align: left
}

img,
picture {
    -webkit-backface-visibility: hidden;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    vertical-align: bottom
}

.pc-none {
    display: none
}

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

@media only screen and (max-width:767px) {
    .sp-none {
        display: none !important
    }
}

.swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important
}

.swiper-button-next,
.swiper-button-prev {
    background: 0 0;
    margin-top: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: transparent;
    display: block;
    cursor: pointer;
    pointer-events: auto
}

.swiper-button-next::after,
.swiper-button-next::before,
.swiper-button-prev::after,
.swiper-button-prev::before {
    content: none
}

.mfp-bg {
    background: #446;
    opacity: .8
}

.mfp-close-btn-in {
    pointer-events: none
}

.mfp-figure:after {
    content: none
}

.mfp-container {
    padding: 0
}

.mfp-close.popup-close {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    cursor: pointer;
    pointer-events: auto;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    bottom: -14.6666666667vw;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    opacity: 1;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .mfp-close.popup-close {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .mfp-close.popup-close {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .mfp-close.popup-close:hover {
        box-shadow: none;
        background-color: #446
    }
}

.mfp-close.popup-close:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .2s
}

@media only screen and (min-width:767px) {
    .mfp-close.popup-close {
        width: 4vw;
        height: 4vw;
        bottom: -5.9375vw
    }

    .mfp-close.popup-close:hover:before {
        background-image: url(../data/webp/icon/icon_close_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .mfp-close.popup-close {
        width: 64px;
        height: 64px;
        bottom: -95px
    }
}

.mfp-close.popup-close::before {
    background-image: url(../data/webp/icon/icon_close.png.webp);
    width: 4.8vw;
    height: 4.8vw
}

@media only screen and (min-width:767px) {
    .mfp-close.popup-close::before {
        width: 1.875vw;
        height: 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .mfp-close.popup-close::before {
        width: 30px;
        height: 30px
    }
}

.mfp-close.popup-close::after {
    content: none
}

.mfp-close.popup-close.mfp-close-gallery {
    position: fixed;
    top: 4vw;
    right: 4vw;
    bottom: auto;
    left: auto;
    transform: none
}

@media only screen and (min-width:767px) {
    .mfp-close.popup-close.mfp-close-gallery {
        top: 2vw;
        right: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .mfp-close.popup-close.mfp-close-gallery {
        top: 32px;
        right: 32px
    }
}

.mfp-close-btn-in,
.mfp-iframe-holder {
    padding: 0 4vw 16vw
}

@media only screen and (min-width:767px) {

    .mfp-close-btn-in,
    .mfp-iframe-holder {
        padding: 0 0 7.1875vw
    }
}

.mfp-ajax-holder {
    padding: 0
}

@media only screen and (min-width:767px) {
    .mfp-ajax-holder {
        left: 50%;
        transform: translateX(-50%)
    }
}

.mfp-iframe-holder .mfp-content,
.mfp-image-holder .mfp-content {
    padding: 0 4vw;
    pointer-events: auto
}

@media only screen and (min-width:767px) {

    .mfp-iframe-holder .mfp-content,
    .mfp-image-holder .mfp-content {
        padding: 0;
        max-width: 900px;
        width: 56.25vw
    }
}

@media only screen and (min-width:1400px) {

    .mfp-iframe-holder .mfp-content,
    .mfp-image-holder .mfp-content {
        width: 900px
    }
}

.mfp-iframe-scaler iframe {
    border-radius: .5333333333vw;
    box-shadow: none;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .mfp-iframe-scaler iframe {
        border-radius: .5vw
    }
}

@media only screen and (min-width:1400px) {
    .mfp-iframe-scaler iframe {
        border-radius: 8px
    }
}

.mfp-gallery {
    overflow: hidden !important
}

.mfp-figure:after {
    content: none
}

.mfp-img {
    padding: 0 !important
}

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all .3s ease-out
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: .75
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all .3s ease-out
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0
}

button.mfp-arrow {
    background-repeat: no-repeat;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    background-size: 3.4666666667vw auto;
    background-color: #fff;
    border-radius: 50%;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    position: fixed;
    margin-top: 0;
    opacity: 1;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    button.mfp-arrow {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1vw auto;
        width: 3vw;
        height: 3vw
    }
}

@media only screen and (min-width:1400px) {
    button.mfp-arrow {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 16px auto;
        width: 48px;
        height: 48px
    }
}

button.mfp-arrow:after,
button.mfp-arrow:before {
    content: none !important
}

@media only screen and (min-width:767px) {
    button.mfp-arrow:hover {
        box-shadow: none;
        background-color: #446
    }
}

button.mfp-arrow:active {
    margin-top: 0
}

button.mfp-arrow.mfp-arrow-left {
    background-image: url(../data/webp/icon/arw_prev.png.webp);
    background-position: 45% center;
    right: auto;
    left: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    button.mfp-arrow.mfp-arrow-left {
        left: 50%;
        transform: translateX(calc(-50% - 21.875vw))
    }

    button.mfp-arrow.mfp-arrow-left:hover {
        background-image: url(../data/webp/icon/arw_prev_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    button.mfp-arrow.mfp-arrow-left {
        transform: translateX(calc(-50% - 350px))
    }
}

button.mfp-arrow.mfp-arrow-right {
    background-position: 55% center;
    background-image: url(../data/webp/icon/arw_next.png.webp);
    left: auto;
    right: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    button.mfp-arrow.mfp-arrow-right {
        right: 50%;
        transform: translateX(calc(-50% + 25vw))
    }

    button.mfp-arrow.mfp-arrow-right:hover {
        background-image: url(../data/webp/icon/arw_next_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    button.mfp-arrow.mfp-arrow-right {
        transform: translateX(calc(-50% + 400px))
    }
}

.header {
    position: relative;
    z-index: 10
}

.header--inner {
    width: 100vw
}

.header--logo {
    width: 32vw;
    height: 11.0666666667vw;
    position: absolute;
    top: 4vw;
    left: 4vw
}

.header--logo a {
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .header--logo a {
        transition: .2s all
    }

    .header--logo a:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .header--logo {
        width: 16.3125vw;
        height: 6.4375vw;
        top: .9375vw;
        left: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .header--logo {
        width: 261px;
        height: 103px;
        top: 15px;
        left: 32px
    }
}

.header--logo.js-blur {
    filter: blur(5px)
}

.header--btn {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    cursor: pointer;
    pointer-events: auto;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    position: fixed;
    top: 4vw;
    right: 4vw;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .header--btn {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .header--btn {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .header--btn:hover {
        box-shadow: none;
        background-color: #446
    }
}

.header--btn:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .2s
}

.header--btn:before {
    content: none
}

.header--btn.js-blur {
    filter: blur(5px)
}

@media only screen and (min-width:767px) {
    .header--btn {
        width: 4vw;
        height: 4vw;
        top: 2vw;
        right: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn {
        width: 64px;
        height: 64px;
        top: 32px;
        right: 32px
    }
}

@media only screen and (min-width:767px) {
    .header--btn:hover .header--btn-line {
        background-color: #0cb
    }
}

.header--btn-line {
    background-color: #446;
    width: 6.1333333333vw;
    height: .9333333333vw;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: .2s
}

@media only screen and (min-width:767px) {
    .header--btn-line {
        width: 2.25vw;
        height: .375vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn-line {
        width: 36px;
        height: 6px
    }
}

.header--btn-line:first-child {
    top: 3.3333333333vw
}

@media only screen and (min-width:767px) {
    .header--btn-line:first-child {
        top: 1.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn-line:first-child {
        top: 19px
    }
}

.header--btn-line:nth-child(2) {
    top: 4.9333333333vw
}

@media only screen and (min-width:767px) {
    .header--btn-line:nth-child(2) {
        top: 1.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn-line:nth-child(2) {
        top: 29px
    }
}

.header--btn-line:nth-child(3) {
    top: 6.5333333333vw
}

@media only screen and (min-width:767px) {
    .header--btn-line:nth-child(3) {
        top: 2.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn-line:nth-child(3) {
        top: 39px
    }
}

.header--btn.js-open .header--btn-line:first-child {
    top: 4.9333333333vw;
    transform: translateX(-50%) rotate(42deg)
}

@media only screen and (min-width:767px) {
    .header--btn.js-open .header--btn-line:first-child {
        top: 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn.js-open .header--btn-line:first-child {
        top: 30px
    }
}

.header--btn.js-open .header--btn-line:nth-child(2) {
    display: none
}

.header--btn.js-open .header--btn-line:nth-child(3) {
    top: 4.9333333333vw;
    transform: translateX(-50%) rotate(-40deg)
}

@media only screen and (min-width:767px) {
    .header--btn.js-open .header--btn-line:nth-child(3) {
        top: 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .header--btn.js-open .header--btn-line:nth-child(3) {
        top: 30px
    }
}

.header--nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s cubic-bezier(.2, .65, .36, 1);
    will-change: opacity;
    pointer-events: none
}

.header--nav.js-open {
    opacity: 1;
    pointer-events: auto
}

.header--nav.js-open .header--nav-bg {
    opacity: 1;
    pointer-events: auto
}

.header--nav.js-open .header--nav-contents {
    right: 0
}

.header--nav-bg {
    background-color: rgba(68, 68, 102, .5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transition: .3s cubic-bezier(.2, .65, .36, 1);
    opacity: 0
}

.header--nav-bg__text {
    width: auto;
    height: 90vh
}

@media only screen and (min-width:767px) {
    .header--nav-bg__text {
        width: calc(100vw - 20.9375vw);
        height: auto;
        top: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .header--nav-bg__text {
        width: calc(100vw - 335px);
        top: 10px
    }
}

@media only screen and (max-width:767px) {
    .header--nav-bg__text img {
        width: auto;
        max-width: none;
        height: 100%;
        max-height: 100%
    }
}

.header--nav-contents {
    background: url(../data/webp/common/bg_parts_navi.png.webp) no-repeat 0 bottom/100% auto;
    background-color: #ebebf2;
    width: 51.4666666667vw;
    height: 100%;
    padding: 6.6666666667vw 8vw 0 4vw;
    position: absolute;
    top: 0;
    right: -51.4666666667vw;
    transition: .3s cubic-bezier(.2, .65, .36, 1);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.header--nav-contents::-webkit-scrollbar {
    display: none
}

@media only screen and (min-width:767px) {
    .header--nav-contents {
        background: url(../data/webp/common/bg_parts_navi.png.webp) no-repeat right bottom/90% auto;
        background-color: #ebebf2;
        width: 18.125vw;
        right: -18.125vw;
        padding: 3.4375vw 1.875vw 0
    }
}

@media only screen and (min-width:1400px) {
    .header--nav-contents {
        width: 290px;
        right: -290px;
        padding: 55px 30px 0
    }
}

.header--nav-list {
    margin: 0 0 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .header--nav-list {
        margin: 0
    }
}

.header--nav-list__item:not(:first-child) {
    margin: 6vw 0 0
}

@media only screen and (min-width:767px) {
    .header--nav-list__item:not(:first-child) {
        margin: 1.375vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .header--nav-list__item:not(:first-child) {
        margin: 22px 0 0
    }
}

.header--nav-list__item a {
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: 4.6666666667vw;
    line-height: 1;
    padding-left: 7.3333333333vw;
    display: block;
    position: relative;
    transition: .3s all
}

@media only screen and (min-width:767px) {
    .header--nav-list__item a {
        font-size: 1.5vw;
        padding-left: 2vw
    }

    .header--nav-list__item a:hover {
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .header--nav-list__item a {
        font-size: 24px;
        padding-left: 32px
    }
}

.header--nav-list__item a:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    width: 4.2666666667vw;
    height: 4.4vw;
    position: absolute;
    top: 0;
    left: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .header--nav-list__item a:before {
        width: 1.5vw;
        height: 1.5625vw;
        left: 0
    }
}

@media only screen and (min-width:1400px) {
    .header--nav-list__item a:before {
        width: 24px;
        height: 25px;
        left: 0
    }
}

.header--nav-list__item a small {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 2.6666666667vw;
    letter-spacing: .08em;
    line-height: 1;
    margin: 1.7333333333vw 0 0;
    display: block
}

@media only screen and (min-width:767px) {
    .header--nav-list__item a small {
        font-size: .6875vw;
        margin: .625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .header--nav-list__item a small {
        font-size: 11px;
        margin: 10px 0 0
    }
}

.header--nav-sns {
    margin: 0 0 0 7.3333333333vw
}

@media only screen and (min-width:767px) {
    .header--nav-sns {
        display: none
    }
}

.header--nav-sns__tit {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    letter-spacing: .1em;
    font-size: 3.2vw
}

.header--nav-sns__list {
    display: flex;
    justify-content: space-between;
    margin: 3.7333333333vw 0 0
}

.header--nav-sns__list-btn {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .header--nav-sns__list-btn {
        transition: .2s all
    }

    .header--nav-sns__list-btn:hover {
        opacity: .7
    }
}

.header.faq .item-faq,
.header.music .item-music,
.header.news .item-news,
.header.note .item-note,
.header.special .item-special,
.header.story .item-story,
.header.system .item-system,
.header.top .item-top {
    color: #0cb
}

.header.faq .item-faq:before,
.header.music .item-music:before,
.header.news .item-news:before,
.header.note .item-note:before,
.header.special .item-special:before,
.header.story .item-story:before,
.header.system .item-system:before,
.header.top .item-top:before {
    background-image: url(../data/webp/icon/icon_kira.png.webp)
}

.header.top .header--logo {
    display: none
}

.footer {
    margin: 22vw 0 0;
    position: relative;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .footer {
        margin: 9.6875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .footer {
        margin: 155px 0 0
    }
}

.footer--ui {
    background-color: rgba(255, 255, 255, .7);
    padding: 8.6666666667vw 0 8vw
}

@media only screen and (min-width:767px) {
    .footer--ui {
        padding: 2vw 0 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--ui {
        padding: 32px 0 30px
    }
}

.footer--ui-list {
    display: flex;
    align-items: center;
    justify-content: center
}

.footer--ui-list a {
    width: auto;
    height: 8.5333333333vw;
    margin: 0 3.4666666667vw;
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .footer--ui-list a {
        height: 3.125vw;
        margin: 0 2.25vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--ui-list a {
        height: 50px;
        margin: 0 36px
    }
}

@media only screen and (min-width:767px) {
    .footer--ui-list a {
        transition: .2s all
    }

    .footer--ui-list a:hover {
        opacity: .7
    }
}

.footer--ui-list a img {
    max-width: none;
    height: 100%;
    max-height: 100%;
    object-fit: contain
}

.footer--contents {
    background-color: rgba(68, 68, 102, .7);
    padding: 7.3333333333vw 0 8vw
}

@media only screen and (min-width:767px) {
    .footer--contents {
        padding: 1.875vw 0 2.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents {
        padding: 30px 0 35px
    }
}

.footer--contents-sns {
    padding: 0 4vw;
    margin: 0 0 6vw
}

@media only screen and (min-width:767px) {
    .footer--contents-sns {
        padding: 0;
        margin: 0 0 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns {
        margin: 0 0 25px
    }
}

.footer--contents-sns__tit {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: #fff;
    letter-spacing: .05em;
    text-align: center;
    font-size: 4.2666666667vw;
    margin: 0 0 1.0666666667vw
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__tit {
        font-size: 1vw;
        margin: 0 0 .9375vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__tit {
        font-size: 16px;
        margin: 0 0 15px
    }
}

.footer--contents-sns__btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.footer--contents-sns__btn-item {
    background-color: #fff;
    border-radius: 4.8vw;
    width: 54vw;
    line-height: 9.6vw;
    padding: 0 4vw;
    margin: 4vw 2vw 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item {
        border-radius: 2vw;
        width: 17.75vw;
        line-height: 3vw;
        padding: 0 .75vw;
        margin: 0 .75vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__btn-item {
        border-radius: 16px;
        width: 190px;
        line-height: 32px;
        padding: 0 12px;
        margin: 0 12px
    }
}

.footer--contents-sns__btn-item span {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 2.7333333333vw;
    letter-spacing: .1em;
    padding: 0 0 0 8.3333333333vw;
    position: relative
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item span {
        font-size: .875vw;
        padding: 0 0 0 2.375vw;
        transition: .2s
    }

    .footer--contents-sns__btn-item span:hover {
        color: #fff
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__btn-item span {
        font-size: 12px;
        padding: 0 0 0 38px
    }
}

.footer--contents-sns__btn-item span:before {
    display: block;
    content: "";
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 4.4vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item span:before {
        height: 1vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__btn-item span:before {
        height: 16px
    }
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item.tw:hover {
        background-color: #000
    }

    .footer--contents-sns__btn-item.tw:hover span:before {
        background-image: url(../data/webp/icon/icon_tw_hov.png.webp)
    }
}

.footer--contents-sns__btn-item.tw span:before {
    background-image: url(../data/webp/icon/icon_tw.png.webp);
    width: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item.tw span:before {
        width: 1.3125vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__btn-item.tw span:before {
        width: 21px
    }
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item.yt:hover {
        background-color: red
    }

    .footer--contents-sns__btn-item.yt:hover span:before {
        background-image: url(../data/webp/icon/icon_yt_hov.png.webp)
    }
}

.footer--contents-sns__btn-item.yt span:before {
    background-image: url(../data/webp/icon/icon_yt.png.webp);
    width: 6.1333333333vw
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item.yt span:before {
        width: 1.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__btn-item.yt span:before {
        width: 23px
    }
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item.dc:hover {
        background-color: #5865f2
    }

    .footer--contents-sns__btn-item.dc:hover span:before {
        background-image: url(../data/webp/icon/icon_dc_hov.png.webp)
    }
}

.footer--contents-sns__btn-item.dc span:before {
    background-image: url(../data/webp/icon/icon_dc.png.webp);
    width: 6vw
}

@media only screen and (min-width:767px) {
    .footer--contents-sns__btn-item.dc span:before {
        width: 1.375vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-sns__btn-item.dc span:before {
        width: 22px
    }
}

.footer--contents-attention {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.6666666667vw;
    color: #fff;
    line-height: 1.15;
    padding: 0 3.3333333333vw
}

@media only screen and (min-width:767px) {
    .footer--contents-attention {
        font-size: .75vw;
        line-height: 1.5;
        text-align: center;
        padding: 0
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-attention {
        font-size: 12px
    }
}

.footer--contents-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 4vw;
    margin: 1.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .footer--contents-link {
        padding: 0;
        margin: 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-link {
        margin: 25px
    }
}

.footer--contents-link a {
    display: inline;
    cursor: pointer;
    pointer-events: auto;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    color: #fff;
    margin: 5.3333333333vw 3.0666666667vw 0
}

@media only screen and (min-width:767px) {
    .footer--contents-link a {
        background-image: linear-gradient(90deg, #f7a, #f7a);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 1px;
        transition: background-size .2s
    }

    .footer--contents-link a:hover {
        background-size: 100% 0
    }
}

@media only screen and (min-width:767px) {
    .footer--contents-link a {
        background-image: linear-gradient(90deg, #fff, #fff);
        font-size: .8125vw;
        margin: 0 .4375vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-link a {
        font-size: 13px;
        margin: 0 7px
    }
}

.footer--contents-copyright {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.4vw;
    color: #fff;
    text-align: center;
    line-height: 1.85;
    padding: 0 4vw;
    margin: 6.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .footer--contents-copyright {
        font-size: .8125vw;
        padding: 0;
        margin: 1.5625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-copyright {
        font-size: 13px;
        margin: 25px 0 0
    }
}

.footer--contents-copyright img {
    width: 13.6vw;
    vertical-align: middle;
    display: inline-block;
    margin: 0 1.0666666667vw
}

@media only screen and (min-width:767px) {
    .footer--contents-copyright img {
        width: 4.5vw;
        margin: 0 .3125vw
    }
}

@media only screen and (min-width:1400px) {
    .footer--contents-copyright img {
        width: 72px;
        margin: 0 5px
    }
}

.loading {
    background: linear-gradient(90deg, #b3fffd 0, #e3e6ff 50%, #fde5f5 100%);
    background-size: 200% 200%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1;
    animation: bgGrade 10s ease infinite
}

.loading--icon {
    width: 32vw;
    display: block;
    opacity: 1
}

@media only screen and (min-width:767px) {
    .loading--icon {
        width: 10vw
    }
}

.loading.js-loaded {
    transition: .5s;
    opacity: 0
}

@keyframes bgGrade {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.container {
    background: linear-gradient(90deg, #b3fffd 0, #e3e6ff 50%, #fde5f5 100%);
    position: relative;
    overflow-x: hidden
}

.container--bg {
    pointer-events: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0
}

.container--bg-lottie {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    background-image: url(../data/webp/common/bg_lottie.png.webp);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0
}

@media only screen and (min-width:767px) {
    .container--bg-lottie {
        background-image: url(../data/webp/common/bg_lottie_pc.png.webp)
    }
}

.container--bg-parallax {
    width: 100%;
    height: 150%;
    position: absolute;
    top: -50%
}

.container--bg-parallax__layer {
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center 0;
    width: 100%;
    height: 400%;
    transition: transform 1.2s 0s cubic-bezier(.075, .82, .165, 1);
    will-change: transform
}

.container--bg-parallax.layer-1 .container--bg-parallax__layer {
    background-image: url(../data/webp/common/bg_parallax01.png.webp)
}

@media only screen and (min-width:767px) {
    .container--bg-parallax.layer-1 .container--bg-parallax__layer {
        background-image: url(../data/webp/common/bg_parallax01_pc.png.webp)
    }
}

.container--bg-parallax.layer-2 .container--bg-parallax__layer {
    background-image: url(../data/webp/common/bg_parallax02.png.webp)
}

@media only screen and (min-width:767px) {
    .container--bg-parallax.layer-2 .container--bg-parallax__layer {
        background-image: url(../data/webp/common/bg_parallax02_pc.png.webp)
    }
}

.container--bg-parallax.layer-3 .container--bg-parallax__layer {
    background-image: url(../data/webp/common/bg_parallax03.png.webp)
}

@media only screen and (min-width:767px) {
    .container--bg-parallax.layer-3 .container--bg-parallax__layer {
        background-image: url(../data/webp/common/bg_parallax03_pc.png.webp)
    }
}

.container.js-blur {
    filter: blur(5px)
}

@media only screen and (min-width:767px) {
    .fix-sns {
        box-shadow: 0 .3125vw .375vw .375vw rgba(68, 68, 102, .05);
        border-radius: 0 .3125vw .3125vw 0;
        background: #fff;
        width: 3.5625vw;
        padding: 1.5625vw .75vw;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 3
    }

    .fix-sns--tit {
        font-family: Montserrat, sans-serif;
        font-weight: 900;
        font-size: 1vw;
        writing-mode: vertical-rl
    }

    .fix-sns--list {
        margin: .1875vw 0 0
    }

    .fix-sns--list-btn {
        width: 2.0625vw;
        height: 2.0625vw;
        margin: 1.0625vw 0 0;
        display: block;
        cursor: pointer;
        pointer-events: auto
    }
}

@media only screen and (min-width:767px) and (min-width:767px) {
    .fix-sns--list-btn {
        transition: .2s all
    }

    .fix-sns--list-btn:hover {
        opacity: .7
    }
}

@media only screen and (min-width:1400px) {
    .fix-sns {
        box-shadow: 0 5px 6px 6px rgba(68, 68, 102, .05);
        border-radius: 0 5px 5px 0;
        width: 57px;
        padding: 25px 12px
    }

    .fix-sns--tit {
        font-size: 16px
    }

    .fix-sns--list {
        margin: 3px 0 0
    }

    .fix-sns--list-btn {
        width: 33px;
        height: 33px;
        margin: 17px 0 0
    }
}

.top #top {
    position: relative
}

.top #top .mfp-bg,
.top #top .mfp-wrap {
    height: 100% !important
}

.top-mv {
    width: 100%;
    position: relative;
    display: block
}

.top-mv--bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    background-image: url(../data/webp/top/mv/bg.png.webp);
    width: 100%;
    height: 145.3333333333vw
}

@media only screen and (min-width:767px) {
    .top-mv--bg {
        background-image: url(../data/webp/top/mv/bg_pc.jpg.webp);
        height: 59.375vw;
        -webkit-mask-image: linear-gradient(to bottom, #fff 0, #fff 93%, rgba(255, 255, 255, .8) 96%, rgba(255, 255, 255, .4) 98%, transparent 100%);
        mask-image: linear-gradient(to bottom, #fff 0, #fff 93%, rgba(255, 255, 255, .8) 96%, rgba(255, 255, 255, .4) 98%, transparent 100%)
    }
}

.top-mv--title {
    width: 65.7333333333vw;
    height: 24.8vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 86.6666666667vw;
    z-index: 5
}

@media only screen and (min-width:767px) {
    .top-mv--title {
        width: 19.9375vw;
        height: 7.875vw;
        top: .75vw;
        left: 1.25vw;
        transform: translateX(0)
    }
}

.top-mv--catch {
    width: 61.3333333333vw;
    height: 14vw;
    position: absolute;
    top: 2.2666666667vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3
}

@media only screen and (min-width:767px) {
    .top-mv--catch {
        width: 44.25vw;
        height: 5.1875vw;
        top: 4.875vw
    }
}

.top-mv--slide {
    margin: 5.0666666667vw auto 0;
    position: relative;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .top-mv--slide {
        margin: -3.3125vw 0 0
    }
}

.top-mv--slide-list {
    padding: 0 0 6.1333333333vw;
    overflow: visible
}

@media only screen and (min-width:767px) {
    .top-mv--slide-list {
        padding: 0 0 2.8125vw
    }
}

.top-mv--slide-item {
    box-shadow: 0 .6666666667vw .8vw .8vw rgba(68, 68, 102, .05);
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .top-mv--slide-item {
        transition: .2s all
    }

    .top-mv--slide-item:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .top-mv--slide-item {
        box-shadow: 0 .3125vw .375vw .375vw rgba(68, 68, 102, .05)
    }
}

.top-mv--slide-item a {
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .top-mv--slide-item a {
        transition: .2s all
    }

    .top-mv--slide-item a:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .top-mv--slide-item a:hover {
        box-shadow: none
    }
}

.top-mv--slide .swiper-button-next,
.top-mv--slide .swiper-button-prev {
    display: none
}

@media only screen and (min-width:767px) {

    .top-mv--slide .swiper-button-next,
    .top-mv--slide .swiper-button-prev {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: 50%;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: rgba(255, 255, 255, .9);
        background-size: 1vw 1.375vw;
        width: 3vw;
        height: 3vw;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        top: 40%;
        cursor: pointer;
        pointer-events: auto;
        z-index: 2;
        transition: .2s;
        display: block
    }
}

@media only screen and (min-width:767px) and (min-width:767px) {

    .top-mv--slide .swiper-button-next:hover,
    .top-mv--slide .swiper-button-prev:hover {
        box-shadow: none;
        background-color: #446
    }
}

@media only screen and (min-width:767px) {
    .top-mv--slide .swiper-button-prev {
        background-image: url(../data/webp/icon/arw_prev.png.webp);
        left: 2vw;
        right: auto
    }

    .top-mv--slide .swiper-button-prev:hover {
        background-image: url(../data/webp/icon/arw_prev_hov.png.webp)
    }
}

@media only screen and (min-width:767px) {
    .top-mv--slide .swiper-button-next {
        background-image: url(../data/webp/icon/arw_next.png.webp);
        right: 2vw;
        left: auto
    }

    .top-mv--slide .swiper-button-next:hover {
        background-image: url(../data/webp/icon/arw_next_hov.png.webp)
    }
}

.top-mv--slide .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0
}

.top-mv--slide .swiper-pagination-bullet {
    background-color: #454567;
    border-radius: 50%;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin: 0 1.6vw !important;
    opacity: .2 !important;
    transition: .3s
}

@media only screen and (min-width:767px) {
    .top-mv--slide .swiper-pagination-bullet {
        width: .625vw;
        height: .625vw;
        margin: 0 .5vw !important
    }
}

.top-mv--slide .swiper-pagination-bullet-active {
    opacity: 1 !important
}

.top-mv--app {
    width: 61.3333333333vw;
    position: relative;
    z-index: 3
}

@media only screen and (max-width:767px) {
    .top-mv--app_sp {
        display: flex;
        margin: -24.6666666667vw 0 0
    }

    .top-mv--app {
        display: flex;
        align-items: center;
        padding: 1.6vw 4vw;
        box-shadow: 0 .3125vw .3125vw .3125vw rgba(68, 68, 102, .1);
        background-color: #fff;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        width: 68vw
    }

    .top-mv--app-store__btn-item_webstore {
        z-index: 4;
        position: fixed;
        width: 25vw;
        height: 25vw;
        margin: -21.6666666667vw 2vw 5vw 73vw
    }
}

@media only screen and (min-width:767px) {
    .top-mv--app {
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0 0;
        box-shadow: 0 .3125vw .3125vw .3125vw rgba(68, 68, 102, .1);
        background-image: url(../data/webp/top/mv/bg_app_pc.png.webp);
        background-size: cover;
        width: 13.75vw;
        padding: 1.25vw .9375vw 1.5625vw;
        position: fixed;
        right: 0;
        bottom: 5vh;
        z-index: 3;
        transition: .2s;
        opacity: 1
    }

    .top-mv--app.js-show {
        opacity: 1
    }
}

@media only screen and (min-width:1400px) {
    .top-mv--app {
        box-shadow: 0 5px 5px 5px rgba(68, 68, 102, .1);
        width: 220px;
        padding: 20px 15px 25px
    }
}

@media only screen and (min-width:767px) {
    .top-mv--app-tit {
        font-family: "M PLUS 1", sans-serif;
        font-weight: 600;
        font-size: 1.5625vw;
        text-align: center;
        letter-spacing: .2em;
        padding-left: .5em
    }

    .top-mv--app-tit i {
        display: inline-block;
        margin: 0 0 0 -.25em
    }
}

@media only screen and (min-width:1400px) {
    .top-mv--app-tit {
        font-size: 25px
    }
}

.top-mv--app-icon {
    width: 17.6vw;
    height: 17.6vw;
    margin: 0 4vw 0 0
}

@media only screen and (min-width:767px) {
    .top-mv--app-icon {
        width: 6.3125vw;
        height: 6.3125vw;
        margin: .625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .top-mv--app-icon {
        width: 101px;
        height: 101px;
        margin: 10px auto 0
    }
}

.top-mv--app-store {
    margin: -.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .top-mv--app-store {
        width: auto;
        margin: .75vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .top-mv--app-store {
        margin: 12px auto 0
    }
}

@media only screen and (max-width:767px) {
    .top-mv--app-store__tit {
        font-family: "M PLUS 1", sans-serif;
        font-weight: 600;
        font-size: 5.4666666667vw;
        letter-spacing: .2em;
        padding: 0
    }

    .top-mv--app-store__tit i {
        display: inline-block;
        margin: 0 0 0 -.25em
    }
}

.top-mv--app-store__btn {
    margin: 1.3333333333vw 0 0
}

@media only screen and (max-width:767px) {
    .top-mv--app-store__btn {
        height: 10.4vw
    }
}

@media only screen and (min-width:767px) {
    .top-mv--app-store__btn {
        margin: .625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .top-mv--app-store__btn {
        margin: 10px auto 0
    }
}

.top-mv--app-store__btn-item {
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .top-mv--app-store__btn-item {
        transition: .2s all
    }

    .top-mv--app-store__btn-item:hover {
        opacity: .7
    }
}

@media only screen and (max-width:767px) {
    .top-mv--app-store__btn-item {
        width: auto;
        height: 10.4vw;
        position: absolute
    }

    .top-mv--app-store__btn-item.ios {
        margin: 0 0 0 4vw
    }

    .top-mv--app-store__btn-item img {
        width: auto;
        max-width: none;
        height: 100%;
        max-height: 100%
    }

    .top-mv--app-store__btn-item.js-hide {
        display: none
    }
}

@media only screen and (min-width:767px) {
    .top-mv--app-store__btn-item {
        width: 10.625vw;
        height: auto;
        margin: 0 auto
    }

    .top-mv--app-store__btn-item.ios {
        margin: 0 auto .75vw
    }

    .top-mv--app-store__btn-item.android {
        margin: 0 auto .75vw;
        border-bottom: 1px solid #999;
        padding-bottom: .75vw
    }

    .top-mv--app-store__btn-item.webstore {
        margin: .75vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .top-mv--app-store__btn-item {
        width: 170px
    }

    .top-mv--app-store__btn-item.ios {
        margin: 0 auto 12px
    }

    .top-mv--app-store__btn-item.android {
        margin: 0 auto;
        border-bottom: 1px solid #999;
        padding-bottom: 12px
    }

    .top-mv--app-store__btn-item.webstore {
        margin: 12px auto 0
    }
}

.top-section {
    margin: 16vw 0 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .top-section {
        margin: 5.625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .top-section {
        margin: 90px 0 0
    }
}

.top-section--title {
    background-position: center center;
    background-repeat: repeat-x;
    background-size: auto 16vw;
    width: 100%;
    padding: 2.6666666667vw 0;
    margin-top: -1.3333333333vw;
    position: relative;
    margin-top: 0 !important
}

@media only screen and (min-width:767px) {
    .top-section--title {
        background-size: auto 7.5vw;
        padding: 1.25vw 0;
        margin-top: 0
    }
}

@media only screen and (min-width:1400px) {
    .top-section--title {
        background-size: auto 120px;
        padding: 20px 0
    }
}

.top-section--title-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 10.6666666667vw;
    line-height: 1;
    text-align: center
}

@media only screen and (min-width:767px) {
    .top-section--title-text {
        font-size: 5vw
    }
}

@media only screen and (min-width:1400px) {
    .top-section--title-text {
        font-size: 80px
    }
}

.top-section--title-text {
    color: #557
}

.top-section--btn {
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(68, 68, 102, .1);
    background-color: #7ed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 5.3333333333vw;
    width: 53.3333333333vw;
    height: 10.6666666667vw;
    margin: 8.2666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .top-section--btn {
        box-shadow: 0 .3125vw .625vw .25vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .top-section--btn {
        box-shadow: 0 5px 10px 4px rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .top-section--btn:hover {
        box-shadow: none;
        background-color: #446
    }

    .top-section--btn:hover span {
        color: #0cb
    }
}

.top-section--btn span {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    font-size: 4vw;
    letter-spacing: .05em
}

@media only screen and (min-width:767px) {
    .top-section--btn span {
        font-size: 1.5vw
    }
}

@media only screen and (min-width:1400px) {
    .top-section--btn span {
        font-size: 24px
    }
}

@media only screen and (min-width:767px) {
    .top-section--btn {
        border-radius: 2vw;
        width: 20vw;
        height: 4vw;
        margin: 3.75vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .top-section--btn {
        border-radius: 32px;
        width: 320px;
        height: 64px;
        margin: 60px auto 0
    }
}

.top-section.news .top-section--title {
    background-image: url(../svg/heading_news_top.svg);
    margin: 0 auto 4vw
}

@media only screen and (min-width:767px) {
    .top-section.news .top-section--title {
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .top-section.news .top-section--title {
        margin: 0 auto
    }
}

.top-section.recommend .top-section--title {
    background-image: url(../svg/heading_recommend.svg)
}

@media only screen and (min-width:767px) {
    .top-section.recommend .top-section--title {
        margin: 0 auto -1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .top-section.recommend .top-section--title {
        margin: 0 auto -20px
    }
}

.top-btn-list {
    width: 92vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap
}

@media only screen and (min-width:767px) {
    .top-btn-list {
        width: 66.875vw
    }
}

@media only screen and (min-width:1400px) {
    .top-btn-list {
        width: 1070px
    }
}

.top-btn-list--item {
    flex-basis: 44vw;
    height: 16vw;
    margin: 4vw 0 0;
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    display: block;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .top-btn-list--item {
        box-shadow: 0 .625vw .5vw 0 rgba(68, 68, 102, .1);
        border-radius: .5vw;
        transition: .2s
    }

    .top-btn-list--item:hover {
        box-shadow: none;
        opacity: .7
    }
}

@media only screen and (min-width:1400px) {
    .top-btn-list--item {
        box-shadow: 0 10px 8px rgba(68, 68, 102, .1);
        border-radius: 8px
    }
}

@media only screen and (max-width:767px) {
    .top-btn-list--item:nth-child(even) {
        margin: 4vw 0 0 4vw
    }
}

@media only screen and (min-width:767px) {
    .top-btn-list--item {
        flex-basis: 20.8125vw;
        height: 7.3125vw;
        margin: 2.5vw 0 0
    }

    .top-btn-list--item:not(:nth-child(3n)) {
        margin: 2.5vw 2.21875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .top-btn-list--item {
        flex-basis: 333px;
        height: 117px;
        margin: 40px 0 0
    }

    .top-btn-list--item:not(:nth-child(3n)) {
        margin: 40px 35.5px 0 0
    }
}

.chara-list--btn {
    width: 24vw;
    height: 24.2666666667vw;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    position: fixed;
    right: 4vw;
    bottom: 4vw;
    z-index: 3
}

@media only screen and (min-width:767px) {
    .chara-list--btn {
        transition: .2s all
    }

    .chara-list--btn:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .chara-list--btn {
        width: 10vw;
        height: 10.125vw;
        right: 1.875vw;
        bottom: 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list--btn {
        width: 160px;
        height: 162px;
        right: 30px;
        bottom: 30px
    }
}

.chara-list__inner {
    position: relative;
    margin-top: 10.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-list__inner {
        margin-top: 7.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__inner {
        margin-top: 120px
    }
}

.chara-list__link {
    position: relative;
    display: block;
    width: 100%;
    height: 53.3333333333vw;
    background-color: #fff;
    background-size: cover
}

@media only screen and (min-width:767px) {
    .chara-list__link {
        height: 15vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__link {
        height: 240px
    }
}

.chara-list__link:not(:first-child) {
    margin-top: 16vw
}

@media only screen and (min-width:767px) {
    .chara-list__link:not(:first-child) {
        margin-top: 5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__link:not(:first-child) {
        margin-top: 80px
    }
}

.chara-list__link:nth-child(even) .chara-list__wrapper {
    flex-direction: row-reverse
}

.chara-list__link.virtualsinger {
    background-image: url(../img/character/virtualsinger/list/bg.png)
}

@media only screen and (min-width:767px) {
    .chara-list__link.virtualsinger {
        background-image: url(../img/character/virtualsinger/list/bg_pc.png)
    }
}

.chara-list__link.unite01 {
    background-image: url(../img/character/unite01/list/bg.png)
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite01 {
        background-image: url(../img/character/unite01/list/bg_pc.png)
    }
}

.chara-list__link.unite02 {
    background-image: url(../img/character/unite02/list/bg.png)
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite02 {
        background-image: url(../img/character/unite02/list/bg_pc.png)
    }
}

.chara-list__link.unite03 {
    background-image: url(../img/character/unite03/list/bg.png)
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite03 {
        background-image: url(../img/character/unite03/list/bg_pc.png)
    }
}

.chara-list__link.unite04 {
    background-image: url(../img/character/unite04/list/bg.png)
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite04 {
        background-image: url(../img/character/unite04/list/bg_pc.png)
    }
}

.chara-list__link.unite05 {
    background-image: url(../img/character/unite05/list/bg.png)
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite05 {
        background-image: url(../img/character/unite05/list/bg_pc.png)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link::before {
        display: block;
        content: "";
        width: 50%;
        height: 100%;
        transition: .2s;
        position: absolute;
        bottom: 0
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link:hover::before {
        width: 90%
    }

    .chara-list__link:hover .chara-list__logo {
        transform: scale(1.08)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link.virtualsinger::before {
        background: #fff;
        background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .8) 100%);
        left: 0
    }

    .chara-list__link.virtualsinger:hover:before {
        background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 20%, #fff 100%)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite01::before {
        background: #45d;
        background: linear-gradient(90deg, rgba(68, 85, 221, 0) 0, rgba(68, 85, 221, 0) 20%, rgba(68, 85, 221, .8) 100%);
        right: 0
    }

    .chara-list__link.unite01:hover:before {
        background: linear-gradient(90deg, rgba(68, 85, 221, 0) 0, rgba(68, 85, 221, 0) 20%, #45d 100%)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite02::before {
        background: #8d4;
        background: linear-gradient(-90deg, rgba(136, 221, 68, 0) 0, rgba(136, 221, 68, 0) 20%, rgba(136, 221, 68, .8) 100%);
        left: 0
    }

    .chara-list__link.unite02:hover:before {
        background: linear-gradient(-90deg, rgba(136, 221, 68, 0) 0, rgba(136, 221, 68, 0) 20%, #8d4 100%)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite03::before {
        background: #e16;
        background: linear-gradient(90deg, rgba(238, 17, 102, 0) 0, rgba(238, 17, 102, 0) 20%, rgba(238, 17, 102, .8) 100%);
        right: 0
    }

    .chara-list__link.unite03:hover:before {
        background: linear-gradient(90deg, rgba(238, 17, 102, 0) 0, rgba(238, 17, 102, 0) 20%, #e16 100%)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite04::before {
        background: #f90;
        background: linear-gradient(-90deg, rgba(255, 153, 0, 0) 0, rgba(255, 153, 0, 0) 20%, rgba(255, 153, 0, .8) 100%);
        left: 0
    }

    .chara-list__link.unite04:hover:before {
        background: linear-gradient(-90deg, rgba(255, 153, 0, 0) 0, rgba(255, 153, 0, 0) 20%, #f90 100%)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__link.unite05::before {
        background: #849;
        background: linear-gradient(90deg, rgba(136, 68, 153, 0) 0, rgba(136, 68, 153, 0) 20%, rgba(136, 68, 153, .8) 100%);
        right: 0
    }

    .chara-list__link.unite05:hover:before {
        background: linear-gradient(90deg, rgba(136, 68, 153, 0) 0, rgba(136, 68, 153, 0) 20%, #849 100%)
    }
}

@media only screen and (min-width:767px) {
    .chara-list__wrapper {
        position: absolute;
        left: 50%;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%)
    }
}

.chara-list__chara {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%)
}

@media only screen and (min-width:767px) {
    .chara-list__chara {
        position: relative;
        left: 0;
        display: flex;
        align-items: flex-end;
        height: 15vw;
        transform: none
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara {
        height: 240px
    }
}

.chara-list__chara.virtualsinger {
    width: 100vw
}

@media only screen and (min-width:767px) {
    .chara-list__chara.virtualsinger {
        width: 47.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara.virtualsinger {
        width: 753px
    }
}

.chara-list__chara.unite01 {
    width: 96.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-list__chara.unite01 {
        width: 45.625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara.unite01 {
        width: 730px
    }
}

.chara-list__chara.unite02 {
    width: 96vw
}

@media only screen and (min-width:767px) {
    .chara-list__chara.unite02 {
        width: 43.625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara.unite02 {
        width: 698px
    }
}

.chara-list__chara.unite03 {
    width: 87.7333333333vw
}

@media only screen and (min-width:767px) {
    .chara-list__chara.unite03 {
        width: 41.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara.unite03 {
        width: 660px
    }
}

.chara-list__chara.unite04 {
    width: 100vw
}

@media only screen and (min-width:767px) {
    .chara-list__chara.unite04 {
        width: 48.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara.unite04 {
        width: 780px
    }
}

.chara-list__chara.unite05 {
    width: 84vw
}

@media only screen and (min-width:767px) {
    .chara-list__chara.unite05 {
        width: 35.625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__chara.unite05 {
        width: 570px
    }
}

.chara-list__logo {
    position: absolute;
    left: 50%;
    bottom: 4vw;
    transform: translateX(-50%);
    z-index: 2;
    filter: drop-shadow(0 0 .6666666667vw #fff) drop-shadow(0 0 .6666666667vw #fff) drop-shadow(0 0 .6666666667vw #fff) drop-shadow(0 0 .6666666667vw #fff)
}

@media only screen and (min-width:767px) {
    .chara-list__logo {
        position: relative;
        left: 0;
        bottom: 0;
        filter: drop-shadow(0 0 .3125vw #fff) drop-shadow(0 0 .3125vw #fff) drop-shadow(0 0 .3125vw #fff) drop-shadow(0 0 .3125vw #fff);
        transform: none;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo {
        filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff)
    }
}

.chara-list__logo.virtualsinger {
    width: 48vw
}

@media only screen and (min-width:767px) {
    .chara-list__logo.virtualsinger {
        width: 17.8125vw;
        margin-right: 4.6875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo.virtualsinger {
        width: 285px;
        margin-right: 75px
    }
}

.chara-list__logo.unite01 {
    width: 53.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-list__logo.unite01 {
        width: 20.125vw;
        margin-left: 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo.unite01 {
        width: 322px;
        margin-left: 65px
    }
}

.chara-list__logo.unite02 {
    width: 53.7333333333vw
}

@media only screen and (min-width:767px) {
    .chara-list__logo.unite02 {
        width: 19.9375vw;
        margin-right: 5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo.unite02 {
        width: 319px;
        margin-right: 80px
    }
}

.chara-list__logo.unite03 {
    width: 51.0666666667vw
}

@media only screen and (min-width:767px) {
    .chara-list__logo.unite03 {
        width: 20vw;
        margin-left: 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo.unite03 {
        width: 320px;
        margin-left: 100px
    }
}

.chara-list__logo.unite04 {
    width: 65.0666666667vw
}

@media only screen and (min-width:767px) {
    .chara-list__logo.unite04 {
        width: 24.125vw;
        margin-right: -5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo.unite04 {
        width: 386px;
        margin-right: -80px
    }
}

.chara-list__logo.unite05 {
    width: 65.0666666667vw
}

@media only screen and (min-width:767px) {
    .chara-list__logo.unite05 {
        width: 24.125vw;
        margin-left: 6.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-list__logo.unite05 {
        width: 386px;
        margin-left: 110px
    }
}

.chara-sub--unite {
    position: relative;
    z-index: 10;
    margin: 0vw auto -2.6666666667vw;
    padding-top: 8vw;
    display: block
}

@media only screen and (min-width:767px) {
    .chara-sub--unite {
        margin: 0vw auto -1.25vw;
        padding-top: 3.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite {
        margin: 0 auto -20px;
        padding-top: 62px
    }
}

.chara-sub--unite.virtualsinger {
    width: 32vw
}

@media only screen and (min-width:767px) {
    .chara-sub--unite.virtualsinger {
        width: 11.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite.virtualsinger {
        width: 190px
    }
}

.chara-sub--unite.unite01 {
    width: 36.5333333333vw
}

@media only screen and (min-width:767px) {
    .chara-sub--unite.unite01 {
        width: 13.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite.unite01 {
        width: 220px
    }
}

.chara-sub--unite.unite02 {
    width: 36.5333333333vw
}

@media only screen and (min-width:767px) {
    .chara-sub--unite.unite02 {
        width: 13.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite.unite02 {
        width: 220px
    }
}

.chara-sub--unite.unite03 {
    width: 34vw
}

@media only screen and (min-width:767px) {
    .chara-sub--unite.unite03 {
        width: 12.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite.unite03 {
        width: 204px
    }
}

.chara-sub--unite.unite04 {
    width: 45.6vw
}

@media only screen and (min-width:767px) {
    .chara-sub--unite.unite04 {
        width: 16.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite.unite04 {
        width: 270px
    }
}

.chara-sub--unite.unite05 {
    width: 40.5333333333vw
}

@media only screen and (min-width:767px) {
    .chara-sub--unite.unite05 {
        width: 15.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--unite.unite05 {
        width: 241px
    }
}

.chara-sub--box {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 8vw;
    z-index: 5
}

@media only screen and (min-width:767px) {
    .chara-sub--box {
        margin-top: 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--box {
        margin-top: 60px
    }
}

.chara-sub--btn {
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(68, 68, 102, .1);
    background-color: #7ed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4.6666666667vw;
    width: 40vw;
    height: 9.3333333333vw;
    margin: 0
}

@media only screen and (min-width:767px) {
    .chara-sub--btn {
        box-shadow: 0 .3125vw .625vw .25vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--btn {
        box-shadow: 0 5px 10px 4px rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .chara-sub--btn:hover {
        box-shadow: none;
        background-color: #446
    }

    .chara-sub--btn:hover span {
        color: #0cb
    }
}

.chara-sub--btn span {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    font-size: 4vw;
    letter-spacing: .05em
}

@media only screen and (min-width:767px) {
    .chara-sub--btn span {
        font-size: 1.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--btn span {
        font-size: 24px
    }
}

@media only screen and (min-width:767px) {
    .chara-sub--btn {
        border-radius: 1.4375vw;
        width: 15vw;
        height: 2.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--btn {
        border-radius: 23px;
        width: 240px;
        height: 45px
    }
}

.chara-sub--btn:not(:first-child) {
    margin-left: 4vw
}

@media only screen and (min-width:767px) {
    .chara-sub--btn:not(:first-child) {
        margin-left: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--btn:not(:first-child) {
        margin-left: 40px
    }
}

.chara-sub--btn span {
    font-size: 3.7333333333vw;
    font-weight: 600
}

@media only screen and (min-width:767px) {
    .chara-sub--btn span {
        font-size: 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--btn span {
        font-size: 20px
    }
}

.chara-sub--btn.js-current {
    box-shadow: none;
    background-color: #446;
    color: #0cb;
    pointer-events: none
}

.chara-unite__inner {
    position: relative;
    margin-top: 8vw
}

@media only screen and (min-width:767px) {
    .chara-unite__inner {
        margin-top: 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__inner {
        margin-top: 60px
    }
}

.chara-unite__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat
}

.chara-unite__test {
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: .7
}

@media only screen and (min-width:767px) {
    .chara-unite__test {
        width: 87.5vw;
        left: 50%;
        transform: translateX(-50%)
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__test {
        width: 1400px
    }
}

.chara-unite__main {
    position: relative;
    width: 100%;
    height: 93.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main {
        height: 55vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main {
        height: 880px
    }
}

.chara-unite__main-inner {
    position: relative;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .chara-unite__main-inner {
        width: 100vw;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main-inner {
        width: 100%
    }
}

.chara-unite__main.virtualsinger.past .chara-unite__bg {
    background-image: url(../data/webp/character/virtualsinger/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .chara-unite__bg {
        background-image: url(../data/webp/character/virtualsinger/past/bg_pc.png.webp)
    }
}

.chara-unite__main.virtualsinger.now .chara-unite__bg {
    background-image: url(../data/webp/character/virtualsinger/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .chara-unite__bg {
        background-image: url(../data/webp/character/virtualsinger/now/bg_pc.png.webp)
    }
}

.chara-unite__main.unite01.past .chara-unite__bg {
    background-image: url(../data/webp/character/unite01/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .chara-unite__bg {
        background-image: url(../data/webp/character/unite01/past/bg_pc.png.webp)
    }
}

.chara-unite__main.unite01.now .chara-unite__bg {
    background-image: url(../data/webp/character/unite01/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .chara-unite__bg {
        background-image: url(../data/webp/character/unite01/now/bg_pc.png.webp)
    }
}

.chara-unite__main.unite02.past .chara-unite__bg {
    background-image: url(../data/webp/character/unite02/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .chara-unite__bg {
        background-image: url(../data/webp/character/unite02/past/bg_pc.png.webp)
    }
}

.chara-unite__main.unite02.now .chara-unite__bg {
    background-image: url(../data/webp/character/unite02/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .chara-unite__bg {
        background-image: url(../data/webp/character/unite02/now/bg_pc.png.webp)
    }
}

.chara-unite__main.unite03.past .chara-unite__bg {
    background-image: url(../data/webp/character/unite03/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .chara-unite__bg {
        background-image: url(../data/webp/character/unite03/past/bg_pc.png.webp)
    }
}

.chara-unite__main.unite03.now .chara-unite__bg {
    background-image: url(../data/webp/character/unite03/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .chara-unite__bg {
        background-image: url(../data/webp/character/unite03/now/bg_pc.png.webp)
    }
}

.chara-unite__main.unite04.past .chara-unite__bg {
    background-image: url(../data/webp/character/unite04/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .chara-unite__bg {
        background-image: url(../data/webp/character/unite04/past/bg_pc.png.webp)
    }
}

.chara-unite__main.unite04.now .chara-unite__bg {
    background-image: url(../data/webp/character/unite04/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .chara-unite__bg {
        background-image: url(../data/webp/character/unite04/now/bg_pc.png.webp)
    }
}

.chara-unite__main.unite05.past .chara-unite__bg {
    background-image: url(../data/webp/character/unite05/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .chara-unite__bg {
        background-image: url(../data/webp/character/unite05/past/bg_pc.png.webp)
    }
}

.chara-unite__main.unite05.now .chara-unite__bg {
    background-image: url(../data/webp/character/unite05/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .chara-unite__bg {
        background-image: url(../data/webp/character/unite05/now/bg_pc.png.webp)
    }
}

.chara-unite__main.virtualsinger.now .chara-unite__test {
    margin-top: -2.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .chara-unite__test {
        margin-top: -.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .chara-unite__test {
        margin-top: -14px
    }
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .chara-unite__test {
        margin-top: -.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .chara-unite__test {
        margin-top: -14px
    }
}

.chara-unite__main.unite01.now .chara-unite__test {
    margin-top: 5.0666666667vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .chara-unite__test {
        margin-top: -1.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .chara-unite__test {
        margin-top: -29px
    }
}

.chara-unite__main.unite01.past .chara-unite__test {
    margin-top: -6.2666666667vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .chara-unite__test {
        margin-top: -9.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .chara-unite__test {
        margin-top: -148px
    }
}

.chara-unite__main.unite02.now .chara-unite__test {
    margin-top: -2vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .chara-unite__test {
        margin-top: -1vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .chara-unite__test {
        margin-top: -16px
    }
}

.chara-unite__main.unite02.past .chara-unite__test {
    margin-top: -7.4666666667vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .chara-unite__test {
        margin-top: -3.625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .chara-unite__test {
        margin-top: -58px
    }
}

.chara-unite__main.unite03.now .chara-unite__test {
    left: 0;
    width: 100vw;
    margin-top: -1.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .chara-unite__test {
        left: 50%;
        width: 80.6875vw;
        margin-top: .25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .chara-unite__test {
        width: 1291px;
        margin-top: 4px
    }
}

.chara-unite__main.unite03.past .chara-unite__test {
    left: 0;
    width: 100vw;
    margin-top: -.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .chara-unite__test {
        left: 50%;
        width: 69.0625vw;
        margin-top: .5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .chara-unite__test {
        width: 1105px;
        margin-top: 8px
    }
}

.chara-unite__main.unite04.now .chara-unite__test {
    margin-top: 4.2666666667vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .chara-unite__test {
        margin-top: -2.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .chara-unite__test {
        margin-top: -44px
    }
}

.chara-unite__main.unite04.past .chara-unite__test {
    margin-top: -2.9333333333vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .chara-unite__test {
        margin-top: -6.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .chara-unite__test {
        margin-top: -99px
    }
}

.chara-unite__main.unite05.now .chara-unite__test {
    left: auto;
    right: 0;
    width: 100vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .chara-unite__test {
        left: 50%;
        width: 76.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .chara-unite__test {
        width: 1220px
    }
}

.chara-unite__main.unite05.past .chara-unite__test {
    left: 0;
    width: 100vw
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .chara-unite__test {
        left: 50%;
        width: 73.25vw;
        margin-top: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .chara-unite__test {
        width: 1172px;
        margin-top: 10px
    }
}

.chara-unite__main.virtualsinger.now .miku {
    width: 61.2vw;
    top: 11.0666666667vw;
    transform: translateX(calc(-50% + 5.7333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .miku {
        width: 38.25vw;
        top: 4.8125vw;
        transform: translateX(calc(-50% + 3vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .miku {
        width: 612px;
        top: 77px;
        transform: translateX(calc(-50% + 48px))
    }
}

.chara-unite__main.virtualsinger.now .miku .chara-unite__chara-link {
    width: 16vw;
    height: 78.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 24vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .miku .chara-unite__chara-link {
        width: 13.125vw;
        height: 46.25vw;
        top: 0vw;
        transform: translateX(calc(-50% + 16.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .miku .chara-unite__chara-link {
        width: 210px;
        height: 740px;
        top: 0;
        transform: translateX(calc(-50% + 258px))
    }
}

.chara-unite__main.virtualsinger.now .rin {
    width: 26.2666666667vw;
    top: 20.5333333333vw;
    transform: translateX(calc(-50% + -27.4666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .rin {
        width: 16.5vw;
        top: 9.125vw;
        transform: translateX(calc(-50% + -20.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .rin {
        width: 264px;
        top: 146px;
        transform: translateX(calc(-50% - 328px))
    }
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .rin {
        z-index: 3
    }
}

.chara-unite__main.virtualsinger.now .rin .chara-unite__chara-link {
    width: 20vw;
    height: 68vw;
    top: 2.6666666667vw;
    transform: translateX(calc(-50% + 14.1333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .rin .chara-unite__chara-link {
        width: 11.25vw;
        height: 41.25vw;
        top: .625vw;
        transform: translateX(calc(-50% + 6.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .rin .chara-unite__chara-link {
        width: 180px;
        height: 660px;
        top: 10px;
        transform: translateX(calc(-50% + 108px))
    }
}

.chara-unite__main.virtualsinger.now .len {
    width: 32vw;
    top: -3.2vw;
    transform: translateX(calc(-50% + -17.8666666667vw));
    z-index: 1
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .len {
        width: 18.875vw;
        top: -1.25vw;
        transform: translateX(calc(-50% + -12.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .len {
        width: 302px;
        top: -20px;
        transform: translateX(calc(-50% - 196px))
    }
}

.chara-unite__main.virtualsinger.now .len .chara-unite__chara-link {
    width: 24vw;
    height: 26vw;
    top: 0vw;
    transform: translateX(calc(-50% + 12.4vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .len .chara-unite__chara-link {
        width: 8.75vw;
        height: 46.875vw;
        top: 3.125vw;
        transform: translateX(calc(-50% + 10.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .len .chara-unite__chara-link {
        width: 140px;
        height: 750px;
        top: 50px;
        transform: translateX(calc(-50% + 168px))
    }
}

.chara-unite__main.virtualsinger.now .luka {
    width: 34.5333333333vw;
    top: 8.2666666667vw;
    transform: translateX(calc(-50% + 18.2666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .luka {
        width: 21.5vw;
        top: 3vw;
        transform: translateX(calc(-50% + 13.0625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .luka {
        width: 344px;
        top: 48px;
        transform: translateX(calc(-50% + 209px))
    }
}

.chara-unite__main.virtualsinger.now .luka .chara-unite__chara-link {
    width: 17.3333333333vw;
    height: 82.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 17.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .luka .chara-unite__chara-link {
        width: 13.125vw;
        height: 50vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .luka .chara-unite__chara-link {
        width: 210px;
        height: 800px;
        top: 0;
        transform: translateX(calc(-50% + 178px))
    }
}

.chara-unite__main.virtualsinger.now .meiko {
    width: 24.4vw;
    top: 4.2666666667vw;
    transform: translateX(calc(-50% + -37.8666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .meiko {
        width: 16.625vw;
        top: .9375vw;
        transform: translateX(calc(-50% + -28vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .meiko {
        width: 266px;
        top: 15px;
        transform: translateX(calc(-50% - 448px))
    }
}

.chara-unite__main.virtualsinger.now .meiko .chara-unite__chara-link {
    width: 13.3333333333vw;
    height: 80vw;
    top: 0vw;
    transform: translateX(calc(-50% + 6.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .meiko .chara-unite__chara-link {
        width: 9.375vw;
        height: 46.25vw;
        top: 0vw;
        transform: translateX(calc(-50% + 4.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .meiko .chara-unite__chara-link {
        width: 150px;
        height: 740px;
        top: 0;
        transform: translateX(calc(-50% + 68px))
    }
}

.chara-unite__main.virtualsinger.now .kaito {
    width: 38.4vw;
    top: -3.3333333333vw;
    transform: translateX(calc(-50% + 30.8vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .kaito {
        width: 30.875vw;
        top: 0vw;
        transform: translateX(calc(-50% + 22.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .kaito {
        width: 494px;
        top: 0;
        transform: translateX(calc(-50% + 362px))
    }
}

.chara-unite__main.virtualsinger.now .kaito .chara-unite__chara-link {
    width: 20vw;
    height: 93.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 28vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.now .kaito .chara-unite__chara-link {
        width: 15vw;
        height: 53.75vw;
        top: 0vw;
        transform: translateX(calc(-50% + 21.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.now .kaito .chara-unite__chara-link {
        width: 240px;
        height: 860px;
        top: 0;
        transform: translateX(calc(-50% + 338px))
    }
}

.chara-unite__main.virtualsinger.past .miku {
    width: 75.7333333333vw;
    top: 11.8666666667vw;
    transform: translateX(calc(-50% + -5.4666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .miku {
        width: 48.3125vw;
        top: 3.625vw;
        transform: translateX(calc(-50% + -3.3125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .miku {
        width: 773px;
        top: 58px;
        transform: translateX(calc(-50% - 53px))
    }
}

.chara-unite__main.virtualsinger.past .miku .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 82.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 41.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .miku .chara-unite__chara-link {
        width: 13.75vw;
        height: 51.875vw;
        top: 0vw;
        transform: translateX(calc(-50% + 25.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .miku .chara-unite__chara-link {
        width: 220px;
        height: 830px;
        top: 0;
        transform: translateX(calc(-50% + 410px))
    }
}

.chara-unite__main.virtualsinger.past .rin {
    width: 42.4vw;
    top: -5.3333333333vw;
    transform: translateX(calc(-50% + 6.4vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .rin {
        width: 25.9375vw;
        top: -4vw;
        transform: translateX(calc(-50% + 5.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .rin {
        width: 415px;
        top: -64px;
        transform: translateX(calc(-50% + 90px))
    }
}

.chara-unite__main.virtualsinger.past .rin .chara-unite__chara-link {
    width: 28vw;
    height: 40vw;
    top: 0vw;
    transform: translateX(calc(-50% + 21.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .rin .chara-unite__chara-link {
        width: 16.875vw;
        height: 28.75vw;
        top: 0vw;
        transform: translateX(calc(-50% + 13.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .rin .chara-unite__chara-link {
        width: 270px;
        height: 460px;
        top: 0;
        transform: translateX(calc(-50% + 220px))
    }
}

.chara-unite__main.virtualsinger.past .len {
    width: 34.1333333333vw;
    top: 15.7333333333vw;
    transform: translateX(calc(-50% + 23.0666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .len {
        width: 21.5vw;
        top: 6.6875vw;
        transform: translateX(calc(-50% + 16.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .len {
        width: 344px;
        top: 107px;
        transform: translateX(calc(-50% + 262px))
    }
}

.chara-unite__main.virtualsinger.past .len .chara-unite__chara-link {
    width: 20vw;
    height: 76.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 20vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .len .chara-unite__chara-link {
        width: 10vw;
        height: 50vw;
        top: 0vw;
        transform: translateX(calc(-50% + 14.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .len .chara-unite__chara-link {
        width: 160px;
        height: 800px;
        top: 0;
        transform: translateX(calc(-50% + 230px))
    }
}

.chara-unite__main.virtualsinger.past .luka {
    width: 44.9333333333vw;
    top: -4.5333333333vw;
    transform: translateX(calc(-50% + -18.1333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .luka {
        width: 28.5625vw;
        top: -2.4375vw;
        transform: translateX(calc(-50% + -12.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .luka {
        width: 457px;
        top: -39px;
        transform: translateX(calc(-50% - 194px))
    }
}

.chara-unite__main.virtualsinger.past .luka .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 97.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 17.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .luka .chara-unite__chara-link {
        width: 12.5vw;
        height: 57.5vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .luka .chara-unite__chara-link {
        width: 200px;
        height: 920px;
        top: 0;
        transform: translateX(calc(-50% + 178px))
    }
}

.chara-unite__main.virtualsinger.past .meiko {
    width: 26.2666666667vw;
    top: 12vw;
    transform: translateX(calc(-50% + -36.5333333333vw));
    z-index: 3
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .meiko {
        width: 17.5625vw;
        top: 1.5vw;
        transform: translateX(calc(-50% + -26.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .meiko {
        width: 281px;
        top: 24px;
        transform: translateX(calc(-50% - 424px))
    }
}

.chara-unite__main.virtualsinger.past .meiko .chara-unite__chara-link {
    width: 20vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 11.7333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .meiko .chara-unite__chara-link {
        width: 13.4375vw;
        height: 53.4375vw;
        top: 0vw;
        transform: translateX(calc(-50% + 6.6875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .meiko .chara-unite__chara-link {
        width: 215px;
        height: 855px;
        top: 0;
        transform: translateX(calc(-50% + 107px))
    }
}

.chara-unite__main.virtualsinger.past .kaito {
    width: 53.0666666667vw;
    top: 3.2vw;
    transform: translateX(calc(-50% + 23.4666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .kaito {
        width: 41.4375vw;
        top: -1.8125vw;
        transform: translateX(calc(-50% + 21.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .kaito {
        width: 663px;
        top: -29px;
        transform: translateX(calc(-50% + 338px))
    }
}

.chara-unite__main.virtualsinger.past .kaito .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 90vw;
    top: 0vw;
    transform: translateX(calc(-50% + 42vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.virtualsinger.past .kaito .chara-unite__chara-link {
        width: 17.5vw;
        height: 58.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 28.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.virtualsinger.past .kaito .chara-unite__chara-link {
        width: 280px;
        height: 930px;
        top: 0;
        transform: translateX(calc(-50% + 460px))
    }
}

.chara-unite__main.unite01.now .ichika {
    width: 38.8vw;
    top: 7.7333333333vw;
    transform: translateX(calc(-50% + 6.6666666667vw));
    z-index: 4
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .ichika {
        width: 25.6875vw;
        top: -.125vw;
        transform: translateX(calc(-50% + 4vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .ichika {
        width: 411px;
        top: -2px;
        transform: translateX(calc(-50% + 64px))
    }
}

.chara-unite__main.unite01.now .ichika .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14.2666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .ichika .chara-unite__chara-link {
        width: 18.125vw;
        height: 55.9375vw;
        top: 0vw;
        transform: translateX(calc(-50% + 13.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .ichika .chara-unite__chara-link {
        width: 290px;
        height: 895px;
        top: 0;
        transform: translateX(calc(-50% + 217px))
    }
}

.chara-unite__main.unite01.now .saki {
    width: 36.5333333333vw;
    top: 7.7333333333vw;
    transform: translateX(calc(-50% + -31.7333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .saki {
        width: 29.6875vw;
        top: 0vw;
        transform: translateX(calc(-50% + -34.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .saki {
        width: 475px;
        top: 0;
        transform: translateX(calc(-50% - 553px))
    }
}

.chara-unite__main.unite01.now .saki .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 11.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .saki .chara-unite__chara-link {
        width: 23.75vw;
        height: 56.5625vw;
        top: 0vw;
        transform: translateX(calc(-50% + 14.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .saki .chara-unite__chara-link {
        width: 380px;
        height: 905px;
        top: 0;
        transform: translateX(calc(-50% + 230px))
    }
}

.chara-unite__main.unite01.now .honami {
    width: 45.2vw;
    top: 4.9333333333vw;
    transform: translateX(calc(-50% + 19.2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .honami {
        width: 30.125vw;
        top: -1.875vw;
        transform: translateX(calc(-50% + 19.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .honami {
        width: 482px;
        top: -30px;
        transform: translateX(calc(-50% + 316px))
    }
}

.chara-unite__main.unite01.now .honami .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 24.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .honami .chara-unite__chara-link {
        width: 17.5vw;
        height: 58.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 18.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .honami .chara-unite__chara-link {
        width: 280px;
        height: 930px;
        top: 0;
        transform: translateX(calc(-50% + 295px))
    }
}

.chara-unite__main.unite01.now .shiho {
    width: 44.9333333333vw;
    top: 7.0666666667vw;
    transform: translateX(calc(-50% + -25.6vw));
    z-index: 3
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .shiho {
        width: 31.5vw;
        top: -.4375vw;
        transform: translateX(calc(-50% + -20.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .shiho {
        width: 504px;
        top: -7px;
        transform: translateX(calc(-50% - 322px))
    }
}

.chara-unite__main.unite01.now .shiho .chara-unite__chara-link {
    width: 20vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 32.2666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .shiho .chara-unite__chara-link {
        width: 16.25vw;
        height: 56.875vw;
        top: 0vw;
        transform: translateX(calc(-50% + 21.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .shiho .chara-unite__chara-link {
        width: 260px;
        height: 910px;
        top: 0;
        transform: translateX(calc(-50% + 350px))
    }
}

.chara-unite__main.unite01.now .miku {
    width: 32.9333333333vw;
    top: 7.2vw;
    transform: translateX(calc(-50% + 33.6vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.now .miku {
        width: 24.5vw;
        top: -.5vw;
        transform: translateX(calc(-50% + 37.3125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.now .miku {
        width: 392px;
        top: -8px;
        transform: translateX(calc(-50% + 597px))
    }
}

.chara-unite__main.unite01.past .ichika {
    width: 40.9333333333vw;
    top: 11.6vw;
    transform: translateX(calc(-50% + -12.8vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .ichika {
        width: 27.1875vw;
        top: 2.75vw;
        transform: translateX(calc(-50% + -8.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .ichika {
        width: 435px;
        top: 44px;
        transform: translateX(calc(-50% - 135px))
    }
}

.chara-unite__main.unite01.past .ichika .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 19.7333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .ichika .chara-unite__chara-link {
        width: 20.625vw;
        height: 56.5625vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .ichika .chara-unite__chara-link {
        width: 330px;
        height: 905px;
        top: 0;
        transform: translateX(calc(-50% + 180px))
    }
}

.chara-unite__main.unite01.past .saki {
    width: 46.4vw;
    top: 14.4vw;
    transform: translateX(calc(-50% + 14.9333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .saki {
        width: 30.8125vw;
        top: 4.625vw;
        transform: translateX(calc(-50% + 10.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .saki {
        width: 493px;
        top: 74px;
        transform: translateX(calc(-50% + 162px))
    }
}

.chara-unite__main.unite01.past .saki .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 78.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 18.9333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .saki .chara-unite__chara-link {
        width: 16.875vw;
        height: 50vw;
        top: 0vw;
        transform: translateX(calc(-50% + 13.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .saki .chara-unite__chara-link {
        width: 270px;
        height: 800px;
        top: 0;
        transform: translateX(calc(-50% + 215px))
    }
}

.chara-unite__main.unite01.past .honami {
    width: 29.8666666667vw;
    top: 4.5333333333vw;
    transform: translateX(calc(-50% + 35.2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .honami {
        width: 22.5vw;
        top: -2vw;
        transform: translateX(calc(-50% + 25.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .honami {
        width: 360px;
        top: -32px;
        transform: translateX(calc(-50% + 402px))
    }
}

.chara-unite__main.unite01.past .honami .chara-unite__chara-link {
    width: 24vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .honami .chara-unite__chara-link {
        width: 17.5vw;
        height: 56.5625vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .honami .chara-unite__chara-link {
        width: 280px;
        height: 905px;
        top: 0;
        transform: translateX(calc(-50% + 190px))
    }
}

.chara-unite__main.unite01.past .shiho {
    width: 30.2666666667vw;
    top: -6.2666666667vw;
    transform: translateX(calc(-50% + -32.4vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .shiho {
        width: 19.6875vw;
        top: -9.25vw;
        transform: translateX(calc(-50% + -21.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .shiho {
        width: 315px;
        top: -148px;
        transform: translateX(calc(-50% - 343px))
    }
}

.chara-unite__main.unite01.past .shiho .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 96.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 11.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .shiho .chara-unite__chara-link {
        width: 14.375vw;
        height: 64.6875vw;
        top: 0vw;
        transform: translateX(calc(-50% + 7.1875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .shiho .chara-unite__chara-link {
        width: 230px;
        height: 1035px;
        top: 0;
        transform: translateX(calc(-50% + 115px))
    }
}

.chara-unite__main.unite01.past .miku {
    width: 31.2vw;
    top: 4.1333333333vw;
    transform: translateX(calc(-50% + -2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite01.past .miku {
        width: 20.625vw;
        top: -2.3125vw;
        transform: translateX(calc(-50% + -1.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite01.past .miku {
        width: 330px;
        top: -37px;
        transform: translateX(calc(-50% - 20px))
    }
}

.chara-unite__main.unite02.now .minori {
    width: 36.4vw;
    top: 5.6vw;
    transform: translateX(calc(-50% + -.5333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .minori {
        width: 21.6875vw;
        top: 1.125vw;
        transform: translateX(calc(-50% + 1.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .minori {
        width: 347px;
        top: 18px;
        transform: translateX(calc(-50% + 25px))
    }
}

.chara-unite__main.unite02.now .minori .chara-unite__chara-link {
    width: 25.3333333333vw;
    height: 66.6666666667vw;
    top: -1.3333333333vw;
    transform: translateX(calc(-50% + 18.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .minori .chara-unite__chara-link {
        width: 18.75vw;
        height: 43.75vw;
        top: 0vw;
        transform: translateX(calc(-50% + 9.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .minori .chara-unite__chara-link {
        width: 300px;
        height: 700px;
        top: 0;
        transform: translateX(calc(-50% + 152px))
    }
}

.chara-unite__main.unite02.now .haruka {
    width: 35.4666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 20.9333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .haruka {
        width: 20.5625vw;
        top: 0vw;
        transform: translateX(calc(-50% + 18.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .haruka {
        width: 329px;
        top: 0;
        transform: translateX(calc(-50% + 295px))
    }
}

.chara-unite__main.unite02.now .haruka .chara-unite__chara-link {
    width: 26.6666666667vw;
    height: 82vw;
    top: 0vw;
    transform: translateX(calc(-50% + 16.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .haruka .chara-unite__chara-link {
        width: 16.25vw;
        height: 48.4375vw;
        top: 0vw;
        transform: translateX(calc(-50% + 9.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .haruka .chara-unite__chara-link {
        width: 260px;
        height: 775px;
        top: 0;
        transform: translateX(calc(-50% + 152px))
    }
}

.chara-unite__main.unite02.now .airi {
    width: 26vw;
    top: 2.9333333333vw;
    transform: translateX(calc(-50% + 37.0666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .airi {
        width: 20.75vw;
        top: 2vw;
        transform: translateX(calc(-50% + 34.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .airi {
        width: 332px;
        top: 32px;
        transform: translateX(calc(-50% + 558px))
    }
}

.chara-unite__main.unite02.now .airi .chara-unite__chara-link {
    width: 18.6666666667vw;
    height: 70.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 15.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .airi .chara-unite__chara-link {
        width: 18.125vw;
        height: 42.5vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .airi .chara-unite__chara-link {
        width: 290px;
        height: 680px;
        top: 0;
        transform: translateX(calc(-50% + 180px))
    }
}

.chara-unite__main.unite02.now .shizuku {
    width: 47.8666666667vw;
    top: -2vw;
    transform: translateX(calc(-50% + -14.8vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .shizuku {
        width: 27.5625vw;
        top: -1vw;
        transform: translateX(calc(-50% + -12.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .shizuku {
        width: 441px;
        top: -16px;
        transform: translateX(calc(-50% - 194px))
    }
}

.chara-unite__main.unite02.now .shizuku .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .shizuku .chara-unite__chara-link {
        width: 18.75vw;
        height: 48.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 9.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .shizuku .chara-unite__chara-link {
        width: 300px;
        height: 770px;
        top: 0;
        transform: translateX(calc(-50% + 150px))
    }
}

.chara-unite__main.unite02.now .miku {
    width: 50vw;
    top: 3.3333333333vw;
    transform: translateX(calc(-50% + -24.9333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.now .miku {
        width: 36.3125vw;
        top: 1.9375vw;
        transform: translateX(calc(-50% + -26.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.now .miku {
        width: 581px;
        top: 31px;
        transform: translateX(calc(-50% - 422px))
    }
}

.chara-unite__main.unite02.past .minori {
    width: 41.0666666667vw;
    top: 11.7333333333vw;
    transform: translateX(calc(-50% + 21.0666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .minori {
        width: 23.875vw;
        top: 7.3125vw;
        transform: translateX(calc(-50% + 10.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .minori {
        width: 382px;
        top: 117px;
        transform: translateX(calc(-50% + 172px))
    }
}

.chara-unite__main.unite02.past .minori .chara-unite__chara-link {
    width: 25.3333333333vw;
    height: 88vw;
    top: 0vw;
    transform: translateX(calc(-50% + 15.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .minori .chara-unite__chara-link {
        width: 17.5vw;
        height: 52.5vw;
        top: 0vw;
        transform: translateX(calc(-50% + 8.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .minori .chara-unite__chara-link {
        width: 280px;
        height: 840px;
        top: 0;
        transform: translateX(calc(-50% + 140px))
    }
}

.chara-unite__main.unite02.past .haruka {
    width: 36.4vw;
    top: 10.6666666667vw;
    transform: translateX(calc(-50% + -14.1333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .haruka {
        width: 21.5vw;
        top: 6.8125vw;
        transform: translateX(calc(-50% + -9.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .haruka {
        width: 344px;
        top: 109px;
        transform: translateX(calc(-50% - 153px))
    }
}

.chara-unite__main.unite02.past .haruka .chara-unite__chara-link {
    width: 24vw;
    height: 89.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 24vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .haruka .chara-unite__chara-link {
        width: 17.5vw;
        height: 53.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 13vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .haruka .chara-unite__chara-link {
        width: 280px;
        height: 850px;
        top: 0;
        transform: translateX(calc(-50% + 208px))
    }
}

.chara-unite__main.unite02.past .airi {
    width: 41.7333333333vw;
    top: 5.3333333333vw;
    transform: translateX(calc(-50% + -29.2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .airi {
        width: 30.0625vw;
        top: 3.6875vw;
        transform: translateX(calc(-50% + -21.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .airi {
        width: 481px;
        top: 59px;
        transform: translateX(calc(-50% - 343px))
    }
}

.chara-unite__main.unite02.past .airi .chara-unite__chara-link {
    width: 25.3333333333vw;
    height: 89.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .airi .chara-unite__chara-link {
        width: 18.75vw;
        height: 53.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .airi .chara-unite__chara-link {
        width: 300px;
        height: 850px;
        top: 0;
        transform: translateX(calc(-50% + 190px))
    }
}

.chara-unite__main.unite02.past .shizuku {
    width: 37.2vw;
    top: 6.9333333333vw;
    transform: translateX(calc(-50% + 31.4666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .shizuku {
        width: 24.625vw;
        top: 4.75vw;
        transform: translateX(calc(-50% + 18.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .shizuku {
        width: 394px;
        top: 76px;
        transform: translateX(calc(-50% + 294px))
    }
}

.chara-unite__main.unite02.past .shizuku .chara-unite__chara-link {
    width: 25.3333333333vw;
    height: 93.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 25.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .shizuku .chara-unite__chara-link {
        width: 18.125vw;
        height: 55vw;
        top: 0vw;
        transform: translateX(calc(-50% + 16.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .shizuku .chara-unite__chara-link {
        width: 290px;
        height: 880px;
        top: 0;
        transform: translateX(calc(-50% + 260px))
    }
}

.chara-unite__main.unite02.past .miku {
    width: 58.4vw;
    top: -7.4666666667vw;
    transform: translateX(calc(-50% + -3.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite02.past .miku {
        width: 33.875vw;
        top: -3.6875vw;
        transform: translateX(calc(-50% + -3.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite02.past .miku {
        width: 542px;
        top: -59px;
        transform: translateX(calc(-50% - 57px))
    }
}

.chara-unite__main.unite03.now .kohane {
    width: 26.4vw;
    top: 10.8vw;
    transform: translateX(calc(-50% + 2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .kohane {
        width: 17.0625vw;
        top: 5.9375vw;
        transform: translateX(calc(-50% + .4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .kohane {
        width: 273px;
        top: 95px;
        transform: translateX(calc(-50% + 7px))
    }
}

.chara-unite__main.unite03.now .kohane .chara-unite__chara-link {
    width: 16vw;
    height: 81.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 11.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .kohane .chara-unite__chara-link {
        width: 13.75vw;
        height: 51.25vw;
        top: 0vw;
        transform: translateX(calc(-50% + 6.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .kohane .chara-unite__chara-link {
        width: 220px;
        height: 820px;
        top: 0;
        transform: translateX(calc(-50% + 110px))
    }
}

.chara-unite__main.unite03.now .an {
    width: 32.1333333333vw;
    top: 9.2vw;
    transform: translateX(calc(-50% + -17.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .an {
        width: 19.9375vw;
        top: 5vw;
        transform: translateX(calc(-50% + -13.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .an {
        width: 319px;
        top: 80px;
        transform: translateX(calc(-50% - 216px))
    }
}

.chara-unite__main.unite03.now .an .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 82.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 16.5333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .an .chara-unite__chara-link {
        width: 12.8125vw;
        height: 52.5vw;
        top: 0vw;
        transform: translateX(calc(-50% + 8.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .an .chara-unite__chara-link {
        width: 205px;
        height: 840px;
        top: 0;
        transform: translateX(calc(-50% + 142px))
    }
}

.chara-unite__main.unite03.now .akito {
    width: 36.1333333333vw;
    top: -2.4vw;
    transform: translateX(calc(-50% + -30.2666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .akito {
        width: 23.9375vw;
        top: -2.375vw;
        transform: translateX(calc(-50% + -25.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .akito {
        width: 383px;
        top: -38px;
        transform: translateX(calc(-50% - 408px))
    }
}

.chara-unite__main.unite03.now .akito .chara-unite__chara-link {
    width: 25.3333333333vw;
    height: 90.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 12.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .akito .chara-unite__chara-link {
        width: 16.25vw;
        height: 58.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 8.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .akito .chara-unite__chara-link {
        width: 260px;
        height: 930px;
        top: 0;
        transform: translateX(calc(-50% + 130px))
    }
}

.chara-unite__main.unite03.now .toya {
    width: 27.6vw;
    top: -2.5333333333vw;
    transform: translateX(calc(-50% + 21.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .toya {
        width: 17.125vw;
        top: -2.4375vw;
        transform: translateX(calc(-50% + 13.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .toya {
        width: 274px;
        top: -39px;
        transform: translateX(calc(-50% + 222px))
    }
}

.chara-unite__main.unite03.now .toya .chara-unite__chara-link {
    width: 25.3333333333vw;
    height: 93.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 13.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .toya .chara-unite__chara-link {
        width: 16.25vw;
        height: 59.375vw;
        top: 0vw;
        transform: translateX(calc(-50% + 8.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .toya .chara-unite__chara-link {
        width: 260px;
        height: 950px;
        top: 0;
        transform: translateX(calc(-50% + 140px))
    }
}

.chara-unite__main.unite03.now .miku {
    width: 25.2vw;
    top: 6.6666666667vw;
    transform: translateX(calc(-50% + 37.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.now .miku {
        width: 20.8125vw;
        top: 3.375vw;
        transform: translateX(calc(-50% + 29.8125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.now .miku {
        width: 333px;
        top: 54px;
        transform: translateX(calc(-50% + 477px))
    }
}

.chara-unite__main.unite03.past .kohane {
    width: 33.6vw;
    top: 12.6666666667vw;
    transform: translateX(calc(-50% + 8.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .kohane {
        width: 20.9375vw;
        top: 6.625vw;
        transform: translateX(calc(-50% + 4.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .kohane {
        width: 335px;
        top: 106px;
        transform: translateX(calc(-50% + 70px))
    }
}

.chara-unite__main.unite03.past .kohane .chara-unite__chara-link {
    width: 20vw;
    height: 78.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 10vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .kohane .chara-unite__chara-link {
        width: 13.625vw;
        height: 51.25vw;
        top: 0vw;
        transform: translateX(calc(-50% + 6.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .kohane .chara-unite__chara-link {
        width: 218px;
        height: 820px;
        top: 0;
        transform: translateX(calc(-50% + 110px))
    }
}

.chara-unite__main.unite03.past .an {
    width: 47.6vw;
    top: 9.7333333333vw;
    transform: translateX(calc(-50% + -9.4666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .an {
        width: 30.25vw;
        top: 4.75vw;
        transform: translateX(calc(-50% + -7.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .an {
        width: 484px;
        top: 76px;
        transform: translateX(calc(-50% - 126px))
    }
}

.chara-unite__main.unite03.past .an .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 81.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14.2666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .an .chara-unite__chara-link {
        width: 13.75vw;
        height: 52.8125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 10vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .an .chara-unite__chara-link {
        width: 220px;
        height: 845px;
        top: 0;
        transform: translateX(calc(-50% + 160px))
    }
}

.chara-unite__main.unite03.past .akito {
    width: 36.6666666667vw;
    top: 3.6vw;
    transform: translateX(calc(-50% + -31.6vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .akito {
        width: 24.125vw;
        top: .875vw;
        transform: translateX(calc(-50% + -22.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .akito {
        width: 386px;
        top: 14px;
        transform: translateX(calc(-50% - 359px))
    }
}

.chara-unite__main.unite03.past .akito .chara-unite__chara-link {
    width: 18.6666666667vw;
    height: 81.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 10.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .akito .chara-unite__chara-link {
        width: 14.375vw;
        height: 53.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 7.1875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .akito .chara-unite__chara-link {
        width: 230px;
        height: 850px;
        top: 0;
        transform: translateX(calc(-50% + 115px))
    }
}

.chara-unite__main.unite03.past .toya {
    width: 27.6vw;
    top: -.6666666667vw;
    transform: translateX(calc(-50% + 23.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .toya {
        width: 17.25vw;
        top: -2vw;
        transform: translateX(calc(-50% + 13.8125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .toya {
        width: 276px;
        top: -32px;
        transform: translateX(calc(-50% + 221px))
    }
}

.chara-unite__main.unite03.past .toya .chara-unite__chara-link {
    width: 24.6666666667vw;
    height: 90vw;
    top: 0vw;
    transform: translateX(calc(-50% + 15.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .toya .chara-unite__chara-link {
        width: 14.375vw;
        height: 58.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 9.6875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .toya .chara-unite__chara-link {
        width: 230px;
        height: 930px;
        top: 0;
        transform: translateX(calc(-50% + 155px))
    }
}

.chara-unite__main.unite03.past .miku {
    width: 27.7333333333vw;
    top: 11.6vw;
    transform: translateX(calc(-50% + 36.1333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite03.past .miku {
        width: 19.3125vw;
        top: 5.9375vw;
        transform: translateX(calc(-50% + 24.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite03.past .miku {
        width: 309px;
        top: 95px;
        transform: translateX(calc(-50% + 396px))
    }
}

.chara-unite__main.unite04.now .tsukasa {
    width: 100vw;
    top: 8.5333333333vw;
    transform: translateX(calc(-50% + 0vw));
    z-index: 1
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .tsukasa {
        width: 75.5625vw;
        top: -.5vw;
        transform: translateX(calc(-50% + 1.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .tsukasa {
        width: 1209px;
        top: -8px;
        transform: translateX(calc(-50% + 25px))
    }
}

.chara-unite__main.unite04.now .tsukasa .chara-unite__chara-link {
    width: 23.3333333333vw;
    height: 84vw;
    top: 0vw;
    transform: translateX(calc(-50% + 45.6vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .tsukasa .chara-unite__chara-link {
        width: 19.375vw;
        height: 59.375vw;
        top: 0vw;
        transform: translateX(calc(-50% + 33.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .tsukasa .chara-unite__chara-link {
        width: 310px;
        height: 950px;
        top: 0;
        transform: translateX(calc(-50% + 538px))
    }
}

.chara-unite__main.unite04.now .emu {
    width: 39.4666666667vw;
    top: 19.2vw;
    transform: translateX(calc(-50% + -18.8vw));
    z-index: 2
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .emu {
        width: 27.75vw;
        top: 7vw;
        transform: translateX(calc(-50% + -19.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .emu {
        width: 444px;
        top: 112px;
        transform: translateX(calc(-50% - 311px))
    }
}

.chara-unite__main.unite04.now .emu .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 72vw;
    top: 0vw;
    transform: translateX(calc(-50% + 17.6vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .emu .chara-unite__chara-link {
        width: 18.125vw;
        height: 51.25vw;
        top: 0vw;
        transform: translateX(calc(-50% + 13.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .emu .chara-unite__chara-link {
        width: 290px;
        height: 820px;
        top: 0;
        transform: translateX(calc(-50% + 215px))
    }
}

.chara-unite__main.unite04.now .nene {
    width: 49.3333333333vw;
    top: 16.8vw;
    transform: translateX(calc(-50% + 20.6666666667vw));
    z-index: 3
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .nene {
        width: 34.9375vw;
        top: 5.375vw;
        transform: translateX(calc(-50% + 22.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .nene {
        width: 559px;
        top: 86px;
        transform: translateX(calc(-50% + 356px))
    }
}

.chara-unite__main.unite04.now .nene .chara-unite__chara-link {
    width: 30.6666666667vw;
    height: 74.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 24vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .nene .chara-unite__chara-link {
        width: 26.25vw;
        height: 53.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 19.375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .nene .chara-unite__chara-link {
        width: 420px;
        height: 850px;
        top: 0;
        transform: translateX(calc(-50% + 310px))
    }
}

.chara-unite__main.unite04.now .rui {
    width: 28.2666666667vw;
    top: 5.3333333333vw;
    transform: translateX(calc(-50% + -35.7333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .rui {
        width: 21.75vw;
        top: -2.75vw;
        transform: translateX(calc(-50% + -38.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .rui {
        width: 348px;
        top: -44px;
        transform: translateX(calc(-50% - 620px))
    }
}

.chara-unite__main.unite04.now .rui .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 85.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 12vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .rui .chara-unite__chara-link {
        width: 17.5vw;
        height: 60.625vw;
        top: 0vw;
        transform: translateX(calc(-50% + 10vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .rui .chara-unite__chara-link {
        width: 280px;
        height: 970px;
        top: 0;
        transform: translateX(calc(-50% + 160px))
    }
}

.chara-unite__main.unite04.now .miku {
    width: 32vw;
    top: 4.2666666667vw;
    transform: translateX(calc(-50% + 34.1333333333vw));
    z-index: 4
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.now .miku {
        width: 31.75vw;
        top: -2.3125vw;
        transform: translateX(calc(-50% + 41.75vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.now .miku {
        width: 508px;
        top: -37px;
        transform: translateX(calc(-50% + 668px))
    }
}

.chara-unite__main.unite04.past .tsukasa {
    width: 70vw;
    top: .6666666667vw;
    transform: translateX(calc(-50% + 15.0666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .tsukasa {
        width: 56.9375vw;
        top: -5.4375vw;
        transform: translateX(calc(-50% + 15.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .tsukasa {
        width: 911px;
        top: -87px;
        transform: translateX(calc(-50% + 247px))
    }
}

.chara-unite__main.unite04.past .tsukasa .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 72vw;
    top: 15.3333333333vw;
    transform: translateX(calc(-50% + 24vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .tsukasa .chara-unite__chara-link {
        width: 13.75vw;
        height: 53.125vw;
        top: 10.9375vw;
        transform: translateX(calc(-50% + 17.5vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .tsukasa .chara-unite__chara-link {
        width: 220px;
        height: 850px;
        top: 175px;
        transform: translateX(calc(-50% + 280px))
    }
}

.chara-unite__main.unite04.past .emu {
    width: 51.8666666667vw;
    top: 17.6vw;
    transform: translateX(calc(-50% + -8.8vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .emu {
        width: 36.375vw;
        top: 6.4375vw;
        transform: translateX(calc(-50% + -5.1875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .emu {
        width: 582px;
        top: 103px;
        transform: translateX(calc(-50% - 83px))
    }
}

.chara-unite__main.unite04.past .emu .chara-unite__chara-link {
    width: 22.4vw;
    height: 72vw;
    top: 0vw;
    transform: translateX(calc(-50% + 17.6vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .emu .chara-unite__chara-link {
        width: 15.625vw;
        height: 50.625vw;
        top: 0vw;
        transform: translateX(calc(-50% + 12.9375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .emu .chara-unite__chara-link {
        width: 250px;
        height: 810px;
        top: 0;
        transform: translateX(calc(-50% + 207px))
    }
}

.chara-unite__main.unite04.past .nene {
    width: 55.6vw;
    top: 1.3333333333vw;
    transform: translateX(calc(-50% + 21.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .nene {
        width: 39.125vw;
        top: -6.1875vw;
        transform: translateX(calc(-50% + 16.25vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .nene {
        width: 626px;
        top: -99px;
        transform: translateX(calc(-50% + 260px))
    }
}

.chara-unite__main.unite04.past .nene .chara-unite__chara-link {
    width: 33.3333333333vw;
    height: 90.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 38.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .nene .chara-unite__chara-link {
        width: 18.125vw;
        height: 63.75vw;
        top: 0vw;
        transform: translateX(calc(-50% + 24.0625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .nene .chara-unite__chara-link {
        width: 290px;
        height: 1020px;
        top: 0;
        transform: translateX(calc(-50% + 385px))
    }
}

.chara-unite__main.unite04.past .rui {
    width: 49.6vw;
    top: 6.6666666667vw;
    transform: translateX(calc(-50% + -25.2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .rui {
        width: 39.8125vw;
        top: 0vw;
        transform: translateX(calc(-50% + -22.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .rui {
        width: 637px;
        top: 0;
        transform: translateX(calc(-50% - 362px))
    }
}

.chara-unite__main.unite04.past .rui .chara-unite__chara-link {
    width: 28vw;
    height: 81.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .rui .chara-unite__chara-link {
        width: 19.375vw;
        height: 57.5vw;
        top: 0vw;
        transform: translateX(calc(-50% + 12.8125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .rui .chara-unite__chara-link {
        width: 310px;
        height: 920px;
        top: 0;
        transform: translateX(calc(-50% + 205px))
    }
}

.chara-unite__main.unite04.past .miku {
    width: 56.6666666667vw;
    top: -2.9333333333vw;
    transform: translateX(calc(-50% + -6.4vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite04.past .miku {
        width: 39.625vw;
        top: -4.375vw;
        transform: translateX(calc(-50% + -5.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite04.past .miku {
        width: 634px;
        top: -70px;
        transform: translateX(calc(-50% - 89px))
    }
}

.chara-unite__main.unite05.now .kanade {
    width: 28vw;
    top: 8.1333333333vw;
    transform: translateX(calc(-50% + 17.7333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .kanade {
        width: 17.8125vw;
        top: 1.5625vw;
        transform: translateX(calc(-50% + 13.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .kanade {
        width: 285px;
        top: 25px;
        transform: translateX(calc(-50% + 215px))
    }
}

.chara-unite__main.unite05.now .kanade .chara-unite__chara-link {
    width: 24vw;
    height: 83.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 11.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .kanade .chara-unite__chara-link {
        width: 16.25vw;
        height: 55vw;
        top: 0vw;
        transform: translateX(calc(-50% + 8.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .kanade .chara-unite__chara-link {
        width: 260px;
        height: 880px;
        top: 0;
        transform: translateX(calc(-50% + 130px))
    }
}

.chara-unite__main.unite05.now .mafuyu {
    width: 26.4vw;
    top: .5333333333vw;
    transform: translateX(calc(-50% + 36.8vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .mafuyu {
        width: 19vw;
        top: -3.625vw;
        transform: translateX(calc(-50% + 28.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .mafuyu {
        width: 304px;
        top: -58px;
        transform: translateX(calc(-50% + 458px))
    }
}

.chara-unite__main.unite05.now .mafuyu .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 90.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .mafuyu .chara-unite__chara-link {
        width: 16.875vw;
        height: 60vw;
        top: 0vw;
        transform: translateX(calc(-50% + 10.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .mafuyu .chara-unite__chara-link {
        width: 270px;
        height: 960px;
        top: 0;
        transform: translateX(calc(-50% + 170px))
    }
}

.chara-unite__main.unite05.now .ena {
    width: 30.5333333333vw;
    top: 5.0666666667vw;
    transform: translateX(calc(-50% + -22.8vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .ena {
        width: 19.625vw;
        top: -.625vw;
        transform: translateX(calc(-50% + -16.4375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .ena {
        width: 314px;
        top: -10px;
        transform: translateX(calc(-50% - 263px))
    }
}

.chara-unite__main.unite05.now .ena .chara-unite__chara-link {
    width: 22.6666666667vw;
    height: 86vw;
    top: 0vw;
    transform: translateX(calc(-50% + 18vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .ena .chara-unite__chara-link {
        width: 16.25vw;
        height: 58.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .ena .chara-unite__chara-link {
        width: 260px;
        height: 930px;
        top: 0;
        transform: translateX(calc(-50% + 185px))
    }
}

.chara-unite__main.unite05.now .mizuki {
    width: 25.8666666667vw;
    top: 2.8vw;
    transform: translateX(calc(-50% + -37.0666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .mizuki {
        width: 19.0625vw;
        top: -2.0625vw;
        transform: translateX(calc(-50% + -28.625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .mizuki {
        width: 305px;
        top: -33px;
        transform: translateX(calc(-50% - 458px))
    }
}

.chara-unite__main.unite05.now .mizuki .chara-unite__chara-link {
    width: 21.3333333333vw;
    height: 88.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 10.9333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .mizuki .chara-unite__chara-link {
        width: 16.25vw;
        height: 58.75vw;
        top: 0vw;
        transform: translateX(calc(-50% + 8.125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .mizuki .chara-unite__chara-link {
        width: 260px;
        height: 940px;
        top: 0;
        transform: translateX(calc(-50% + 130px))
    }
}

.chara-unite__main.unite05.now .miku {
    width: 55.8666666667vw;
    top: 25.7333333333vw;
    transform: translateX(calc(-50% + -9.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.now .miku {
        width: 36.375vw;
        top: 13.0625vw;
        transform: translateX(calc(-50% + -5.9375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.now .miku {
        width: 582px;
        top: 209px;
        transform: translateX(calc(-50% - 95px))
    }
}

.chara-unite__main.unite05.past .kanade {
    width: 35.6vw;
    top: 21.6vw;
    transform: translateX(calc(-50% + -11.0666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .kanade {
        width: 22.6875vw;
        top: 11.5625vw;
        transform: translateX(calc(-50% + -6.8125vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .kanade {
        width: 363px;
        top: 185px;
        transform: translateX(calc(-50% - 109px))
    }
}

.chara-unite__main.unite05.past .kanade .chara-unite__chara-link {
    width: 29.3333333333vw;
    height: 69.3333333333vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14.9333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .kanade .chara-unite__chara-link {
        width: 20vw;
        height: 46.875vw;
        top: 0vw;
        transform: translateX(calc(-50% + 10vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .kanade .chara-unite__chara-link {
        width: 320px;
        height: 750px;
        top: 0;
        transform: translateX(calc(-50% + 160px))
    }
}

.chara-unite__main.unite05.past .mafuyu {
    width: 32.8vw;
    top: 3.0666666667vw;
    transform: translateX(calc(-50% + 16vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .mafuyu {
        width: 21.625vw;
        top: -1.0625vw;
        transform: translateX(calc(-50% + 10.9375vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .mafuyu {
        width: 346px;
        top: -17px;
        transform: translateX(calc(-50% + 175px))
    }
}

.chara-unite__main.unite05.past .mafuyu .chara-unite__chara-link {
    width: 24vw;
    height: 86.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 13.6vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .mafuyu .chara-unite__chara-link {
        width: 16.25vw;
        height: 58.125vw;
        top: 0vw;
        transform: translateX(calc(-50% + 10vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .mafuyu .chara-unite__chara-link {
        width: 260px;
        height: 930px;
        top: 0;
        transform: translateX(calc(-50% + 160px))
    }
}

.chara-unite__main.unite05.past .ena {
    width: 25.0666666667vw;
    top: 6.5333333333vw;
    transform: translateX(calc(-50% + 37.4666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .ena {
        width: 19.3125vw;
        top: 1.25vw;
        transform: translateX(calc(-50% + 26.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .ena {
        width: 309px;
        top: 20px;
        transform: translateX(calc(-50% + 430px))
    }
}

.chara-unite__main.unite05.past .ena .chara-unite__chara-link {
    width: 24vw;
    height: 80vw;
    top: 0vw;
    transform: translateX(calc(-50% + 12.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .ena .chara-unite__chara-link {
        width: 17.5vw;
        height: 53.75vw;
        top: 0vw;
        transform: translateX(calc(-50% + 10vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .ena .chara-unite__chara-link {
        width: 280px;
        height: 860px;
        top: 0;
        transform: translateX(calc(-50% + 160px))
    }
}

.chara-unite__main.unite05.past .mizuki {
    width: 37.6vw;
    top: 1.0666666667vw;
    transform: translateX(calc(-50% + -31.2vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .mizuki {
        width: 28.125vw;
        top: -2.375vw;
        transform: translateX(calc(-50% + -22.5625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .mizuki {
        width: 450px;
        top: -38px;
        transform: translateX(calc(-50% - 361px))
    }
}

.chara-unite__main.unite05.past .mizuki .chara-unite__chara-link {
    width: 26.6666666667vw;
    height: 82.6666666667vw;
    top: 0vw;
    transform: translateX(calc(-50% + 14.6666666667vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .mizuki .chara-unite__chara-link {
        width: 23.75vw;
        height: 55vw;
        top: 0vw;
        transform: translateX(calc(-50% + 11.875vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .mizuki .chara-unite__chara-link {
        width: 380px;
        height: 880px;
        top: 0;
        transform: translateX(calc(-50% + 190px))
    }
}

.chara-unite__main.unite05.past .miku {
    width: 44vw;
    top: 1.6vw;
    transform: translateX(calc(-50% + -9.3333333333vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main.unite05.past .miku {
        width: 29.25vw;
        top: -2vw;
        transform: translateX(calc(-50% + -6.0625vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main.unite05.past .miku {
        width: 468px;
        top: -32px;
        transform: translateX(calc(-50% - 97px))
    }
}

.chara-unite__chara {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none
}

@media only screen and (min-width:767px) {
    .chara-unite__chara.hover:has(.chara-unite__chara-link:hover) {
        z-index: 100
    }

    .chara-unite__chara.hover .chara-unite__chara-link:hover~.img {
        z-index: 100
    }

    .chara-unite__chara.hover .chara-unite__chara-link:hover~.img.default img {
        transform: scale(1.05);
        opacity: 0
    }

    .chara-unite__chara.hover .chara-unite__chara-link:hover~.img.hover {
        transform: scale(1.05);
        opacity: 1 !important
    }
}

.chara-unite__chara-img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 100
}

.chara-unite__chara-link {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    pointer-events: auto
}

.chara-unite__chara .img {
    position: relative
}

@media only screen and (min-width:767px) {
    .chara-unite__chara .img.default img {
        transition: .6s
    }
}

@media only screen and (max-width:767px) {
    .chara-unite__chara .img.hover {
        display: none
    }
}

@media only screen and (min-width:767px) {
    .chara-unite__chara .img.hover {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0 !important;
        transition: .6s;
        transition-delay: 0s !important
    }
}

.hidden {
    display: none;
    visibility: hidden
}

.chara-about__inner {
    position: relative;
    margin-top: 9.3333333333vw;
    padding-left: 16.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-about__inner {
        display: flex;
        justify-content: center;
        margin-top: 4.6875vw;
        padding-left: 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__inner {
        margin-top: 75px
    }
}

.chara-about__wrapper {
    will-change: transform
}

@media only screen and (min-width:767px) {
    .chara-about__wrapper {
        margin-left: 4.375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__wrapper {
        margin-left: 70px
    }
}

.chara-about__logo {
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .chara-about__logo {
        margin: 0 auto;
        padding-top: .9375vw;
        height: 6.375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo {
        padding-top: 15px;
        height: 102px
    }
}

.chara-about__logo.virtualsinger {
    width: 36.5333333333vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo.virtualsinger {
        width: 17.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo.virtualsinger {
        width: 276px
    }
}

.chara-about__logo.unite01 {
    width: 45.2vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo.unite01 {
        width: 21.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo.unite01 {
        width: 339px
    }
}

.chara-about__logo.unite02 {
    width: 42.2666666667vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo.unite02 {
        width: 21.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo.unite02 {
        width: 337px
    }
}

.chara-about__logo.unite03 {
    width: 38.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo.unite03 {
        width: 18.375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo.unite03 {
        width: 294px
    }
}

.chara-about__logo.unite04 {
    width: 52.5333333333vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo.unite04 {
        width: 24.625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo.unite04 {
        width: 394px
    }
}

.chara-about__logo.unite05 {
    width: 46.4vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo.unite05 {
        width: 21.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo.unite05 {
        width: 350px
    }
}

.chara-about__copy {
    margin-top: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-about__copy {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: flex-start;
        margin-top: 2.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__copy {
        margin-top: 45px
    }
}

.chara-about__copy.virtualsinger .chara-about__copy-text {
    background-color: #fff;
    color: #00e5c7
}

.chara-about__copy.unite01 .chara-about__copy-text {
    background-color: #45d
}

.chara-about__copy.unite02 .chara-about__copy-text {
    background-color: #8d4
}

.chara-about__copy.unite03 .chara-about__copy-text {
    background-color: #e16
}

.chara-about__copy.unite04 .chara-about__copy-text {
    background-color: #f90
}

.chara-about__copy.unite05 .chara-about__copy-text {
    background-color: #849
}

.chara-about__copy-text {
    display: inline-block;
    font-size: 6.4vw;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    background-color: #fff;
    padding: .1333333333vw 2vw .4vw;
    letter-spacing: .1em;
    border-radius: .5333333333vw;
    background: linear-gradient(-90deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .1) 80%, rgba(255, 255, 255, 0) 90%)
}

@media only screen and (min-width:767px) {
    .chara-about__copy-text {
        font-size: 3.1875vw;
        padding: .625vw .1875vw;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-orientation: upright;
        border-radius: .25vw;
        background: linear-gradient(0deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .1) 80%, rgba(255, 255, 255, 0) 90%)
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__copy-text {
        font-size: 51px;
        padding: 10px 3px;
        border-radius: 4px
    }
}

.chara-about__copy-text:not(:first-child) {
    margin-top: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-about__copy-text:not(:first-child) {
        margin-top: 0;
        margin-right: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__copy-text:not(:first-child) {
        margin-right: 10px
    }
}

.chara-about__copy-text b {
    display: inline-block;
    margin: 0 -.5em 0 0
}

@media only screen and (min-width:767px) {
    .chara-about__copy-text b {
        margin: 0 0 -.5em 0
    }
}

.chara-about__copy-text span {
    font-family: "Nanum Gothic", sans-serif;
    font-weight: 600
}

.chara-about__h2 {
    position: absolute;
    top: 0;
    left: -5.0666666667vw;
    width: 62.6666666667vw;
    transform: rotate(90deg) translate(-85%, 0);
    transform-origin: left top
}

@media only screen and (min-width:767px) {
    .chara-about__h2 {
        position: relative;
        left: 0;
        width: 29.375vw;
        padding: .9375vw 0 0;
        transform: none
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__h2 {
        width: 454px;
        padding: 15px 0 0
    }
}

.chara-about__text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    width: 76vw;
    margin-top: 5.3333333333vw;
    font-size: 3.7333333333vw;
    line-height: 1.6071428571;
    letter-spacing: .05em
}

@media only screen and (min-width:767px) {
    .chara-about__text {
        position: relative;
        left: 0;
        width: 44.375vw;
        margin-top: 2.5vw;
        font-size: 1.5vw;
        transform: none
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__text {
        width: 710px;
        margin-top: 40px;
        font-size: 24px
    }
}

.chara-about__movie {
    position: relative;
    display: block;
    width: 76vw;
    margin-top: 5.3333333333vw;
    border-radius: 1.0666666667vw;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:767px) {
    .chara-about__movie {
        transition: .2s
    }
}

.chara-about__movie::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: 60% center;
    background-image: url(../data/webp/icon/icon_play.png.webp);
    background-size: 5.0666666667vw 6vw;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .chara-about__movie::after {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1.75vw 2vw;
        width: 4.375vw;
        height: 4.375vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__movie::after {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 28px 32px;
        width: 70px;
        height: 70px
    }
}

@media only screen and (min-width:767px) {
    .chara-about__movie:hover:after {
        box-shadow: none;
        background-color: #446;
        background-image: url(../data/webp/icon/icon_play_hov.png.webp)
    }
}

@media only screen and (min-width:767px) {
    .chara-about__movie {
        width: 43.75vw;
        margin-top: 1.875vw;
        border-radius: .5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__movie {
        width: 700px;
        margin-top: 30px;
        border-radius: 8px
    }
}

.chara-about__movie::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    content: "";
    width: 100%;
    height: 100%
}

.chara-about__content {
    width: 92vw;
    margin: 12.6666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .chara-about__content {
        width: 67.5vw;
        margin-top: 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__content {
        width: 1080px;
        margin-top: 100px
    }
}

@media only screen and (min-width:767px) {
    .chara-about__box {
        height: 20vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__box {
        height: 320px
    }
}

.chara-about__box:not(:first-child) {
    margin-top: 8vw
}

@media only screen and (min-width:767px) {
    .chara-about__box:not(:first-child) {
        margin-top: 4.375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__box:not(:first-child) {
        margin-top: 70px
    }
}

.chara-about__box:nth-child(even) .chara-about__container {
    flex-direction: row-reverse
}

.chara-about__box:nth-child(even) .chara-about__h3 {
    text-align: right
}

.chara-about__box:nth-child(even) .chara-about__caption {
    text-align: right
}

.chara-about__h3 {
    position: relative;
    z-index: 2;
    padding: 0 4vw
}

@media only screen and (min-width:767px) {
    .chara-about__h3 {
        padding: 0 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__h3 {
        padding: 0 40px
    }
}

.chara-about__h3.virtualsinger .chara-about__h3-text>span {
    background-color: #fff;
    background-color: #446;
    color: #fff
}

.chara-about__h3.unite01 .chara-about__h3-text>span {
    background-color: #45d
}

.chara-about__h3.unite02 .chara-about__h3-text>span {
    background-color: #8d4
}

.chara-about__h3.unite03 .chara-about__h3-text>span {
    background-color: #e16
}

.chara-about__h3.unite04 .chara-about__h3-text>span {
    background-color: #f90
}

.chara-about__h3.unite05 .chara-about__h3-text>span {
    background-color: #849
}

@media only screen and (max-width:767px) {

    .chara-about__h3.unite04 .chara-about__h3-text>span,
    .chara-about__h3.unite05 .chara-about__h3-text>span {
        font-size: 4.8vw
    }
}

.chara-about__h3-text:not(:first-child) {
    margin-top: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-about__h3-text:not(:first-child) {
        margin-top: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__h3-text:not(:first-child) {
        margin-top: 10px
    }
}

.chara-about__h3-text>span {
    display: inline-block;
    font-size: 6.4vw;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    background-color: #fff;
    padding: .1333333333vw 2vw .6666666667vw;
    letter-spacing: .1em;
    border-radius: .5333333333vw;
    background: linear-gradient(-90deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .1) 80%, rgba(255, 255, 255, 0) 90%)
}

@media only screen and (min-width:767px) {
    .chara-about__h3-text>span {
        font-size: 2.5vw;
        padding: .1875vw 1.25vw .4375vw;
        border-radius: .25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__h3-text>span {
        font-size: 40px;
        padding: 3px 20px 7px;
        border-radius: 4px
    }
}

.chara-about__container {
    margin-top: -4vw;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 1.0666666667vw;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .chara-about__container {
        display: flex;
        justify-content: space-between;
        margin-top: -5.3125vw;
        border-radius: .5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__container {
        margin-top: -85px;
        border-radius: 8px
    }
}

@media only screen and (min-width:767px) {
    .chara-about__container.virtualsinger {
        margin-top: -1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__container.virtualsinger {
        margin-top: -30px
    }
}

@media only screen and (min-width:767px) {
    .chara-about__container.virtualsinger .chara-about__caption {
        padding-top: 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__container.virtualsinger .chara-about__caption {
        padding-top: 60px
    }
}

.chara-about__caption {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 3.7333333333vw;
    padding: 8vw 4vw 5.3333333333vw;
    line-height: 1.5714285714;
    flex: 1
}

@media only screen and (min-width:767px) {
    .chara-about__caption {
        font-size: 1.5vw;
        padding: 6.875vw 2.5vw 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__caption {
        font-size: 24px;
        padding: 110px 40px 0
    }
}

@media only screen and (min-width:767px) {
    .chara-about__thumb {
        width: 26.6875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__thumb {
        width: 427px
    }
}

.chara-figure__inner {
    margin-top: 13.3333333333vw
}

@media only screen and (min-width:767px) {
    .chara-figure__inner {
        margin-top: 7.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-figure__inner {
        margin-top: 120px
    }
}

.chara-figure__h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18.6666666667vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    letter-spacing: .06em;
    color: #fff;
    background: #446;
    background: linear-gradient(90deg, rgba(68, 68, 102, .8) 0, rgba(68, 68, 102, .5) 100%)
}

@media only screen and (min-width:767px) {
    .chara-figure__h3 {
        height: 8.75vw;
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-figure__h3 {
        height: 140px;
        font-size: 48px
    }
}

@media only screen and (min-width:767px) {
    .chara-figure__wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3.75vw 0;
        background-color: #e8eff7
    }
}

@media only screen and (min-width:1400px) {
    .chara-figure__wrapper {
        padding: 60px 0
    }
}

@media only screen and (min-width:767px) {
    .chara-figure__main {
        width: 71.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-figure__main {
        width: 1140px
    }
}

.chara-movie__inner {
    margin: 13.3333333333vw 0 12.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-movie__inner {
        margin: 7.5vw 0 6.25vw;
        display: flex;
        justify-content: center
    }
}

@media only screen and (min-width:1400px) {
    .chara-movie__inner {
        margin: 120px 0 100px
    }
}

.chara-movie__main {
    width: 76vw;
    margin: 0 auto;
    position: relative;
    display: block
}

@media only screen and (min-width:767px) {
    .chara-movie__main {
        margin: 0;
        width: 23.125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-movie__main {
        width: 370px;
        transition: .2s
    }

    .chara-movie__main:hover .chara-movie__title {
        color: #0cb
    }
}

.chara-movie__main:not(:first-child) {
    margin-top: 4.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-movie__main:not(:first-child) {
        margin-top: 0;
        margin-left: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-movie__main:not(:first-child) {
        margin-left: 40px
    }
}

.chara-movie__img {
    filter: drop-shadow(0 1.3333333333vw 1.3333333333vw rgba(0, 0, 0, .1));
    border-radius: 1.0666666667vw;
    position: relative;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:767px) {
    .chara-movie__img {
        transition: .2s
    }
}

.chara-movie__img::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: 60% center;
    background-image: url(../data/webp/icon/icon_play.png.webp);
    background-size: 5.0666666667vw 6vw;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .chara-movie__img::after {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1.75vw 2vw;
        width: 4.375vw;
        height: 4.375vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-movie__img::after {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 28px 32px;
        width: 70px;
        height: 70px
    }
}

@media only screen and (min-width:767px) {
    .chara-movie__img:hover:after {
        box-shadow: none;
        background-color: #446;
        background-image: url(../data/webp/icon/icon_play_hov.png.webp)
    }
}

@media only screen and (min-width:767px) {
    .chara-movie__img {
        filter: drop-shadow(0 .625vw .625vw rgba(0, 0, 0, .1));
        border-radius: .5vw;
        transition: .2s
    }

    .chara-movie__img:hover {
        filter: none
    }
}

@media only screen and (min-width:1400px) {
    .chara-movie__img {
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .1));
        border-radius: 8px
    }
}

.chara-movie__img:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.chara-movie__title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 3.7333333333vw;
    line-height: 1.5714285714;
    display: inline-block;
    margin: 2vw 0 0
}

@media only screen and (min-width:767px) {
    .chara-movie__title {
        font-size: 1vw;
        line-height: 1.5625;
        margin: .75vw 0 0;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-movie__title {
        font-size: 16px;
        margin: 12px 0 0
    }
}

.chara-detail--main {
    position: relative;
    z-index: 2
}

.chara-detail--main-name {
    text-align: center;
    margin: 4.6666666667vw 0 0;
    position: relative;
    z-index: 2
}

.chara-detail--main-name__en {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 3.2vw;
    letter-spacing: .08em;
    line-height: 1
}

.chara-detail--main-name__main {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 9.6vw;
    letter-spacing: .08em;
    line-height: 1;
    margin: 3.3333333333vw 0 4vw
}

.chara-detail--main-name__cv {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 4.2666666667vw;
    letter-spacing: .08em;
    line-height: 1
}

.chara-detail--main-name__cv small {
    font-size: 3.2vw
}

.chara-detail--main-bg {
    width: 90.6666666667vw;
    height: 128vw;
    position: absolute
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg {
        width: calc(50vw + 18.75vw);
        height: 60vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-bg {
        height: 960px
    }
}

.chara-detail--main-bg.bg-left {
    clip-path: polygon(0 0, 100% 0, 25% 100%, 0 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .9) 80%, #fff 90%);
    opacity: .7;
    top: 44vw;
    left: 0
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-left {
        clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
        top: 8.75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-bg.bg-left {
        top: 140px
    }
}

.chara-detail--main-bg.bg-left.virtualsinger {
    background-color: #fff
}

.chara-detail--main-bg.bg-left.unite01 {
    background-color: #45d
}

.chara-detail--main-bg.bg-left.unite02 {
    background-color: #8d4
}

.chara-detail--main-bg.bg-left.unite03 {
    background-color: #e16
}

.chara-detail--main-bg.bg-left.unite04 {
    background-color: #f90
}

.chara-detail--main-bg.bg-left.unite05 {
    background-color: #849
}

.chara-detail--main-bg.bg-right {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%);
    top: 30.6666666667vw;
    right: 0
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right {
        clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
        background-position: right 0;
        top: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-bg.bg-right {
        top: 40px
    }
}

.chara-detail--main-bg.bg-right.virtualsinger.past {
    background-image: url(../data/webp/character/virtualsinger/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.virtualsinger.past {
        background-image: url(../data/webp/character/virtualsinger/past/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.virtualsinger.now {
    background-image: url(../data/webp/character/virtualsinger/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.virtualsinger.now {
        background-image: url(../data/webp/character/virtualsinger/now/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite01.past {
    background-image: url(../data/webp/character/unite01/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite01.past {
        background-image: url(../data/webp/character/unite01/past/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite01.now {
    background-image: url(../data/webp/character/unite01/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite01.now {
        background-image: url(../data/webp/character/unite01/now/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite02.past {
    background-image: url(../data/webp/character/unite02/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite02.past {
        background-image: url(../data/webp/character/unite02/past/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite02.now {
    background-image: url(../data/webp/character/unite02/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite02.now {
        background-image: url(../data/webp/character/unite02/now/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite03.past {
    background-image: url(../data/webp/character/unite03/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite03.past {
        background-image: url(../data/webp/character/unite03/past/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite03.now {
    background-image: url(../data/webp/character/unite03/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite03.now {
        background-image: url(../data/webp/character/unite03/now/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite04.past {
    background-image: url(../data/webp/character/unite04/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite04.past {
        background-image: url(../data/webp/character/unite04/past/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite04.now {
    background-image: url(../data/webp/character/unite04/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite04.now {
        background-image: url(../data/webp/character/unite04/now/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite05.past {
    background-image: url(../data/webp/character/unite05/past/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite05.past {
        background-image: url(../data/webp/character/unite05/past/bg_pc.png.webp)
    }
}

.chara-detail--main-bg.bg-right.unite05.now {
    background-image: url(../data/webp/character/unite05/now/bg.png.webp)
}

@media only screen and (min-width:767px) {
    .chara-detail--main-bg.bg-right.unite05.now {
        background-image: url(../data/webp/character/unite05/now/bg_pc.png.webp)
    }
}

.chara-detail--main-img {
    position: relative;
    height: 160vw
}

.chara-detail--main-img img {
    height: 202.9333333333vw;
    max-width: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -38.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-detail--main-img {
        width: 100%;
        height: 73.9375vw;
        margin: 0 auto
    }

    .chara-detail--main-img img {
        width: 100vw;
        height: 86.25vw;
        max-width: none;
        top: -12.5vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-img {
        height: 1183px
    }

    .chara-detail--main-img img {
        width: 1600px;
        height: 1380px;
        top: -200px
    }
}

.chara-detail--main-message {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 36.2666666667vw;
    left: 10.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-detail--main-message {
        top: 6.375vw;
        left: 50%;
        margin-left: -35vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-message {
        top: 102px;
        margin-left: -560px
    }
}

.chara-detail--main-message__text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    border-radius: .5333333333vw;
    display: inline-block;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 5.3333333333vw;
    color: #fff;
    background-color: #fff;
    padding: 1.6vw .6666666667vw 1.3333333333vw;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .chara-detail--main-message__text {
        font-size: 2.5vw;
        padding: .75vw .1875vw .625vw;
        border-radius: .25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-message__text {
        font-size: 40px;
        padding: 12px 3px 10px;
        border-radius: 4px
    }
}

.chara-detail--main-message__text b {
    display: inline-block;
    margin-bottom: -.5em
}

.chara-detail--main-message__text i {
    font-style: normal;
    text-combine-upright: all;
    letter-spacing: 0;
    line-height: 0
}

.chara-detail--main-message__text span {
    font-family: "Nanum Gothic", sans-serif;
    font-weight: 600;
    letter-spacing: -.015em
}

.chara-detail--main-message__text:not(:first-child) {
    margin-right: 1.25vw
}

@media only screen and (min-width:767px) {
    .chara-detail--main-message__text:not(:first-child) {
        margin-right: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-message__text:not(:first-child) {
        margin-right: 10px
    }
}

.chara-detail--main-arw {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    width: 3.4666666667vw;
    height: 5.3333333333vw;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    position: absolute;
    top: 92.2666666667vw
}

@media only screen and (min-width:767px) {
    .chara-detail--main-arw {
        transition: .2s all
    }

    .chara-detail--main-arw:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .chara-detail--main-arw {
        width: 1.625vw;
        height: 2.5vw;
        top: 31.25vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-arw {
        width: 26px;
        height: 40px;
        top: 500px
    }
}

.chara-detail--main-arw.prev {
    background-image: url(../data/webp/icon/arw_prev.png.webp);
    left: 4vw
}

@media only screen and (min-width:767px) {
    .chara-detail--main-arw.prev {
        left: 2vw
    }

    .chara-detail--main-arw.prev:hover {
        background-image: url(../data/webp/icon/arw_prev_hov.png.webp)
    }
}

@media only screen and (min-width:1601px) {
    .chara-detail--main-arw.prev {
        left: 50%;
        margin-left: -768px
    }
}

.chara-detail--main-arw.next {
    background-image: url(../data/webp/icon/arw_next.png.webp);
    right: 4vw
}

@media only screen and (min-width:767px) {
    .chara-detail--main-arw.next {
        right: 2vw
    }

    .chara-detail--main-arw.next:hover {
        background-image: url(../data/webp/icon/arw_next_hov.png.webp)
    }
}

@media only screen and (min-width:1601px) {
    .chara-detail--main-arw.next {
        right: auto;
        left: 50%;
        margin-left: 768px
    }
}

.miku .chara-detail--main-message__text {
    background-color: #3cb
}

.rin .chara-detail--main-message__text {
    background-color: #fc1
}

.ren .chara-detail--main-message__text {
    background-color: #fe1
}

.luka .chara-detail--main-message__text {
    background-color: #fbc
}

.meiko .chara-detail--main-message__text {
    background-color: #d44
}

.kaito .chara-detail--main-message__text {
    background-color: #36c
}

.ichika .chara-detail--main-message__text {
    background-color: #3ae
}

.saki .chara-detail--main-message__text {
    background-color: #fd4;
    background-color: #ffc800
}

.honami .chara-detail--main-message__text {
    background-color: #e66
}

.shiho .chara-detail--main-message__text {
    background-color: #bd2
}

.minori .chara-detail--main-message__text {
    background-color: #fca;
    background-color: #ffc096
}

.haruka .chara-detail--main-message__text {
    background-color: #9cf
}

.airi .chara-detail--main-message__text {
    background-color: #fac
}

.shizuku .chara-detail--main-message__text {
    background-color: #9ed;
    background-color: #6be6cd
}

.kohane .chara-detail--main-message__text {
    background-color: #f69
}

.an .chara-detail--main-message__text {
    background-color: #0bd
}

.akito .chara-detail--main-message__text {
    background-color: #f72
}

.toya .chara-detail--main-message__text {
    background-color: #07d
}

.tsukasa .chara-detail--main-message__text {
    background-color: #fb0
}

.emu .chara-detail--main-message__text {
    background-color: #f6b
}

.nene .chara-detail--main-message__text {
    background-color: #3d9
}

.rui .chara-detail--main-message__text {
    background-color: #b8e
}

.kanade .chara-detail--main-message__text {
    background-color: #b68
}

.mafuyu .chara-detail--main-message__text {
    background-color: #88c
}

.ena .chara-detail--main-message__text {
    background-color: #ca8
}

.mizuki .chara-detail--main-message__text {
    background-color: #dac
}

.chara-data--inner {
    border-radius: .5333333333vw;
    background-color: #fff;
    width: 92vw;
    padding: 8vw 4vw;
    margin: -8vw auto 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .chara-data--inner {
        border-radius: .5vw;
        width: 30.625vw;
        padding: 1.875vw 1.875vw;
        margin: 0;
        position: absolute;
        top: 2.1875vw;
        left: 50%;
        margin-left: 6.875vw
    }
}

@media only screen and (min-width:900px) {
    .chara-data--inner {
        top: 6.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--inner {
        border-radius: 8px;
        width: 490px;
        padding: 30px 30px;
        top: 105px;
        margin-left: 110px
    }
}

@media only screen and (min-width:767px) {
    .chara-data--name-en {
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        font-size: 1vw;
        letter-spacing: .08em;
        line-height: 1
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--name-en {
        font-size: 16px
    }
}

@media only screen and (min-width:767px) {
    .chara-data--name-main {
        font-family: "M PLUS 1", sans-serif;
        font-weight: 700;
        font-size: 3.5vw;
        letter-spacing: .08em;
        line-height: 1;
        margin: .625vw 0 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--name-main {
        font-size: 56px;
        margin: 10px 0 20px
    }
}

@media only screen and (min-width:767px) {
    .chara-data--name-cv {
        font-family: "M PLUS 1", sans-serif;
        font-weight: 500;
        font-size: 1.5vw;
        letter-spacing: .08em;
        line-height: 1
    }

    .chara-data--name-cv small {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--name-cv {
        font-size: 24px
    }

    .chara-data--name-cv small {
        font-size: 16px
    }
}

.chara-data--profile {
    border-bottom: #446 solid .5333333333vw;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 5.3333333333vw;
    letter-spacing: .08em;
    line-height: 1;
    padding: 0 0 2vw
}

@media only screen and (min-width:767px) {
    .chara-data--profile {
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        border-bottom: #446 solid .125vw;
        font-size: 1.875vw;
        padding: 0 0 .75vw;
        margin: 2vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--profile {
        border-bottom: #446 solid 2px;
        font-size: 30px;
        padding: 0 0 12px;
        margin: 32px 0 0
    }
}

.chara-data--detail {
    border-bottom: rgba(68, 68, 102, .2) solid .2666666667vw;
    padding: 1.8666666667vw 0 2.1333333333vw;
    display: flex;
    justify-content: space-between
}

@media only screen and (min-width:767px) {
    .chara-data--detail {
        border-bottom: rgba(68, 68, 102, .2) solid .125vw;
        padding: .625vw 0 .75vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--detail {
        border-bottom: rgba(68, 68, 102, .2) solid 2px;
        padding: 10px 0 12px
    }
}

.chara-data--detail-contents {
    width: 100%;
    font-size: 3.2vw;
    display: flex;
    justify-content: space-between
}

@media only screen and (min-width:767px) {
    .chara-data--detail-contents {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--detail-contents {
        font-size: 16px
    }
}

.chara-data--detail-contents:nth-last-child(2) {
    width: calc(50% - .6666666667vw)
}

@media only screen and (min-width:767px) {
    .chara-data--detail-contents:nth-last-child(2) {
        width: calc(50% - .3125vw)
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--detail-contents:nth-last-child(2) {
        width: calc(50% - 5px)
    }
}

.chara-data--detail-contents:nth-last-child(2)~.chara-data--detail-contents {
    width: calc(50% - 6vw);
    margin: 0 0 0 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .chara-data--detail-contents:nth-last-child(2)~.chara-data--detail-contents {
        width: calc(50% - 1.8125vw);
        margin: 0 0 0 2.125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--detail-contents:nth-last-child(2)~.chara-data--detail-contents {
        width: calc(50% - 29px);
        margin: 0 0 0 34px
    }
}

.chara-data--detail-tit {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    line-height: 1.5833333333
}

.chara-data--detail-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    text-align: right;
    line-height: 1.5833333333
}

.chara-data--text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.7333333333vw;
    line-height: 1.5714285714;
    margin: 7.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .chara-data--text {
        font-size: 1vw;
        line-height: 1.75;
        margin: 1.5625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--text {
        font-size: 16px;
        margin: 25px 0 0
    }
}

.chara-data--thumb {
    border-radius: .5333333333vw;
    margin: 7.3333333333vw 0 0;
    display: block;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:767px) {
    .chara-data--thumb {
        transition: .2s
    }
}

.chara-data--thumb::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: 60% center;
    background-image: url(../data/webp/icon/icon_play.png.webp);
    background-size: 5.0666666667vw 6vw;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .chara-data--thumb::after {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1.75vw 2vw;
        width: 4.375vw;
        height: 4.375vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--thumb::after {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 28px 32px;
        width: 70px;
        height: 70px
    }
}

@media only screen and (min-width:767px) {
    .chara-data--thumb:hover:after {
        box-shadow: none;
        background-color: #446;
        background-image: url(../data/webp/icon/icon_play_hov.png.webp)
    }
}

@media only screen and (min-width:767px) {
    .chara-data--thumb {
        border-radius: .5vw;
        margin: 1.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--thumb {
        border-radius: 8px;
        margin: 30px 0 0
    }
}

.chara-data--thumb::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    content: "";
    width: 100%;
    height: 100%
}

.chara-card--slide {
    padding: 0 0 6.1333333333vw;
    margin: 8vw 0 0;
    overflow: visible
}

@media only screen and (min-width:767px) {
    .chara-card--slide {
        padding: 0;
        margin: 1.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-card--slide {
        margin: 30px 0 0
    }
}

@media only screen and (min-width:767px) {
    .chara-card--slide-block {
        justify-content: center
    }
}

.chara-card--slide-item {
    border-radius: .5333333333vw;
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .chara-card--slide-item {
        border-radius: .5vw;
        box-shadow: 0 .625vw .5vw 0 rgba(68, 68, 102, .1);
        width: 23.25vw;
        margin: 0 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-card--slide-item {
        border-radius: 8px;
        box-shadow: 0 10px 8px 0 rgba(68, 68, 102, .1);
        width: 372px;
        margin: 0 20px
    }
}

.chara-card--slide-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative
}

@media only screen and (min-width:767px) {
    .chara-card--slide-item a {
        transition: .2s
    }
}

.chara-card--slide-item a::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../data/webp/icon/icon_plus.png.webp);
    background-size: 2.4vw;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    width: 5.6vw;
    height: 5.6vw;
    position: absolute;
    right: 1.2vw;
    bottom: 1.2vw;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .chara-card--slide-item a::after {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1.125vw;
        width: 2.625vw;
        height: 2.625vw;
        right: .5625vw;
        bottom: .5625vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .chara-card--slide-item a::after {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 18px;
        width: 42px;
        height: 42px;
        right: 9px;
        bottom: 9px
    }
}

@media only screen and (min-width:767px) {
    .chara-card--slide-item a:hover:after {
        box-shadow: none;
        background-color: #446;
        background-image: url(../data/webp/icon/icon_plus_hov.png.webp)
    }
}

@media only screen and (max-width:767px) {
    .chara-card--slide-item a {
        pointer-events: none
    }

    .chara-card--slide-item a::after {
        content: none
    }
}

.chara-card--slide .swiper-pagination {
    bottom: 0 !important
}

@media only screen and (min-width:767px) {
    .chara-card--slide .swiper-pagination {
        display: none
    }
}

.chara-card--slide .swiper-pagination-bullet {
    background-color: #454567;
    border-radius: 50%;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin: 0 1.6vw !important;
    opacity: .2 !important;
    transition: .3s
}

@media only screen and (min-width:767px) {
    .chara-card--slide .swiper-pagination-bullet {
        display: none
    }
}

.chara-card--slide .swiper-pagination-bullet-active {
    opacity: 1 !important
}

.chara-navi--inner {
    background-color: rgba(255, 255, 255, .8);
    position: relative;
    z-index: 2
}

.chara-navi--member {
    width: 100%;
    padding: 2.6666666667vw 0 5.3333333333vw;
    margin: 13.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .chara-navi--member {
        padding: 1.875vw 0;
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--member {
        padding: 30px 0;
        margin: 60px 0 0
    }
}

.chara-navi--member.virtualsinger {
    background-color: rgba(255, 255, 255, .15)
}

.chara-navi--member.unite01 {
    background-color: rgba(68, 85, 221, .15)
}

.chara-navi--member.unite02 {
    background-color: rgba(136, 221, 68, .15)
}

.chara-navi--member.unite03 {
    background-color: rgba(238, 17, 102, .15)
}

.chara-navi--member.unite04 {
    background-color: rgba(255, 153, 0, .15)
}

.chara-navi--member.unite05 {
    background-color: rgba(136, 68, 153, .15)
}

.chara-navi--member-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.chara-navi--member-item {
    width: 20vw;
    height: 20vw;
    margin: 2vw 2vw 0
}

@media only screen and (min-width:767px) {
    .chara-navi--member-item {
        width: 9.375vw;
        height: 9.375vw;
        margin: 0 .9375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--member-item {
        width: 150px;
        height: 150px;
        margin: 0 15px
    }
}

.chara-navi--member-item a {
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .chara-navi--member-item a {
        transition: .2s all
    }

    .chara-navi--member-item a:hover {
        opacity: .7
    }
}

.chara-navi--member-item a.js-current {
    opacity: .3;
    pointer-events: none
}

.chara-navi--logo {
    width: 100%;
    padding: 2.6666666667vw 4vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo {
        padding: 1.25vw 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo {
        padding: 20px 0
    }
}

.chara-navi--logo-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-list {
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center
    }
}

.chara-navi--logo-link {
    width: 30.6666666667vw;
    height: 16vw;
    position: relative;
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link {
        transition: .2s all
    }

    .chara-navi--logo-link:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link {
        width: 12.5vw;
        height: 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link {
        width: 200px;
        height: 100px
    }
}

.chara-navi--logo-link img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.chara-navi--logo-link.js-current {
    pointer-events: none
}

.chara-navi--logo-link.js-current:before {
    display: block;
    content: "";
    border-radius: 1.0666666667vw;
    width: 30.6666666667vw;
    height: 16vw;
    opacity: .15;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.js-current:before {
        border-radius: .5vw;
        width: 12.5vw;
        height: 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.js-current:before {
        border-radius: 8px;
        width: 200px;
        height: 100px
    }
}

.chara-navi--logo-link.js-current.detail {
    pointer-events: auto
}

.chara-navi--logo-link.js-current.virtualsinger:before {
    background-color: #fff
}

.chara-navi--logo-link.js-current.unite01:before {
    background-color: #45d
}

.chara-navi--logo-link.js-current.unite02:before {
    background-color: #8d4
}

.chara-navi--logo-link.js-current.unite03:before {
    background-color: #e16
}

.chara-navi--logo-link.js-current.unite04:before {
    background-color: #f90
}

.chara-navi--logo-link.js-current.unite05:before {
    background-color: #849
}

.chara-navi--logo-link.virtualsinger img {
    width: 19.0666666667vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.virtualsinger img {
        width: 7.3125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.virtualsinger img {
        width: 117px
    }
}

.chara-navi--logo-link.unite01 img {
    width: 23.4666666667vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.unite01 img {
        width: 9.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.unite01 img {
        width: 145px
    }
}

.chara-navi--logo-link.unite02 img {
    width: 22vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.unite02 img {
        width: 8.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.unite02 img {
        width: 135px
    }
}

.chara-navi--logo-link.unite03 img {
    width: 20.2666666667vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.unite03 img {
        width: 7.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.unite03 img {
        width: 125px
    }
}

.chara-navi--logo-link.unite04 img {
    width: 26.9333333333vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.unite04 img {
        width: 10.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.unite04 img {
        width: 167px
    }
}

.chara-navi--logo-link.unite05 img {
    width: 24vw
}

@media only screen and (min-width:767px) {
    .chara-navi--logo-link.unite05 img {
        width: 9.3125vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--logo-link.unite05 img {
        width: 149px
    }
}

.sub-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 2vw 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .sub-list {
        padding: 0;
        margin: 0 0 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .sub-list {
        margin: 0 0 65px
    }
}

.sub-list--btn {
    border-radius: 4.6666666667vw;
    background-color: #fff;
    flex-basis: 40vw;
    height: 9.3333333333vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    margin: 0 2vw 2.6666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    position: relative
}

@media only screen and (min-width:767px) {
    .sub-list--btn {
        border-radius: 2.25vw;
        flex-basis: 15vw;
        height: 2.875vw;
        font-size: 1.25vw;
        margin: 0 .8125vw;
        transition: .3s all
    }

    .sub-list--btn:hover {
        background-color: #446;
        color: #fff
    }
}

@media only screen and (min-width:1400px) {
    .sub-list--btn {
        border-radius: 23px;
        flex-basis: 240px;
        height: 46px;
        font-size: 20px;
        margin: 0 13px
    }
}

.sub-list--btn.js-active {
    background-color: #446;
    color: #fff;
    pointer-events: none
}

.special-sec:not(:first-of-type) {
    margin: 16vw 0 0
}

@media only screen and (min-width:767px) {
    .special-sec:not(:first-of-type) {
        margin: 6.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .special-sec:not(:first-of-type) {
        margin: 100px 0 0
    }
}

.special-sec--tit {
    background: linear-gradient(90deg, rgba(68, 68, 102, .8) 0, rgba(68, 68, 102, .6) 100%);
    width: 100%;
    padding: 5.6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .special-sec--tit {
        padding: 2.6875vw 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .special-sec--tit {
        padding: 43px 100px
    }
}

.special-sec--tit.even {
    background: linear-gradient(90deg, rgba(68, 68, 102, .6) 0, rgba(68, 68, 102, .8) 100%)
}

.special-sec--tit-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center
}

@media only screen and (min-width:767px) {
    .special-sec--tit-text {
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .special-sec--tit-text {
        font-size: 48px
    }
}

.special-sec--tit-text small {
    font-size: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .special-sec--tit-text small {
        font-size: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .special-sec--tit-text small {
        font-size: 40px
    }
}

.animation-list--inner {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4vw;
    margin-top: 4vw
}

@media only screen and (min-width:767px) {
    .animation-list--inner {
        width: 75vw;
        padding: 0;
        margin: 1.25vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .animation-list--inner {
        width: 1200px;
        margin: 20px auto 0
    }
}

.animation-list--item {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    background: #fff;
    width: 44vw;
    margin: 4vw 0 0;
    position: relative;
    display: block;
    overflow: hidden
}

@media only screen and (max-width:767px) {
    .animation-list--item:nth-child(even) {
        margin: 4vw 0 0 4vw
    }
}

@media only screen and (min-width:767px) {
    .animation-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .3125vw;
        width: 23.125vw;
        margin: 2.5vw 2.5vw 0 0;
        transition: .2s
    }

    .animation-list--item:nth-child(3n) {
        margin: 2.5vw 0 0
    }

    .animation-list--item:hover {
        box-shadow: none
    }

    .animation-list--item:hover .animation-list--title {
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .animation-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 5px;
        width: 370px;
        margin: 40px 40px 0 0;
        transition: .2s
    }

    .animation-list--item:nth-child(3n) {
        margin: 40px 0 0
    }
}

.animation-list--thumb {
    height: 24.6666666667vw;
    position: relative;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:767px) {
    .animation-list--thumb {
        transition: .2s
    }
}

.animation-list--thumb::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: 60% center;
    background-image: url(../data/webp/icon/icon_play.png.webp);
    background-size: 3.7333333333vw 4.6666666667vw;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    width: 9.3333333333vw;
    height: 9.3333333333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .animation-list--thumb::after {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1.75vw 2vw;
        width: 4.375vw;
        height: 4.375vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .animation-list--thumb::after {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 28px 32px;
        width: 70px;
        height: 70px
    }
}

@media only screen and (min-width:767px) {
    .animation-list--thumb:hover:after {
        box-shadow: none;
        background-color: #446;
        background-image: url(../data/webp/icon/icon_play_hov.png.webp)
    }
}

.animation-list--thumb:before {
    display: block;
    content: "";
    background-color: rgba(68, 68, 102, .5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.animation-list--thumb img {
    object-fit: cover
}

@media only screen and (min-width:767px) {
    .animation-list--thumb {
        height: 12.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .animation-list--thumb {
        height: 205px
    }
}

.animation-list--title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 3.2vw;
    line-height: 1.5833333333;
    display: inline-block;
    padding: 3.3333333333vw 3.3333333333vw
}

@media only screen and (min-width:767px) {
    .animation-list--title {
        font-size: 1vw;
        line-height: 1.5625;
        padding: 1.25vw 1.25vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .animation-list--title {
        font-size: 16px;
        padding: 20px 20px
    }
}

.anthology-main--img {
    width: 89.6vw;
    margin: -2.6666666667vw auto 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .anthology-main--img {
        width: 42vw;
        margin: -2.1875vw auto .1875vw
    }
}

@media only screen and (min-width:1400px) {
    .anthology-main--img {
        width: 672px;
        margin: -35px auto 3px
    }
}

@media only screen and (min-width:767px) {
    .anthology-list--inner {
        width: 75vw;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap
    }
}

@media only screen and (min-width:1400px) {
    .anthology-list--inner {
        width: 1200px
    }
}

.anthology-list--item {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    background-color: #fff;
    width: 66.6666666667vw;
    height: 21.3333333333vw;
    padding: 2.6666666667vw 2.6666666667vw 10vw 24.6666666667vw;
    margin: 5.3333333333vw auto 0;
    position: relative;
    display: block;
    overflow: hidden
}

.anthology-list--item:before {
    display: block;
    content: "";
    background-repeat: repeat-y;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/special/comics/anthology/bg_dot.png.webp);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0
}

@media only screen and (min-width:767px) {
    .anthology-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .3125vw;
        width: 23.125vw;
        height: 10.3125vw;
        padding: 1.5625vw 1.5625vw 5.3125vw 9.875vw;
        margin: 2.5vw 2.5vw 0 0;
        transition: .2s
    }

    .anthology-list--item:nth-child(3n) {
        margin: 2.5vw 0 0
    }

    .anthology-list--item:hover {
        box-shadow: none
    }

    .anthology-list--item:hover .anthology-list--name span {
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .anthology-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 5px;
        width: 370px;
        height: 165px;
        padding: 25px 25px 85px 158px;
        margin: 40px 40px 0 0
    }

    .anthology-list--item:nth-child(3n) {
        margin: 40px 0 0
    }
}

.anthology-list--name small {
    color: #a7a7bc;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.6666666667vw;
    line-height: 1;
    display: block
}

.anthology-list--name span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 3.2vw;
    line-height: .8571428571;
    margin: 1.3333333333vw 0 0;
    display: block
}

@media only screen and (min-width:767px) {
    .anthology-list--name small {
        font-size: .875vw
    }

    .anthology-list--name span {
        font-size: 1.25vw;
        line-height: .8333333333;
        margin: .625vw 0 0;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .anthology-list--name small {
        font-size: 14px
    }

    .anthology-list--name span {
        font-size: 20px;
        line-height: .8333333333;
        margin: 10px 0 0
    }
}

.anthology-list--item.item-1 {
    background-image: url(../data/webp/special/comics/anthology/thumb_1.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-1 {
        background-image: url(../data/webp/special/comics/anthology/thumb_1_pc.png.webp)
    }
}

.anthology-list--item.item-2 {
    background-image: url(../data/webp/special/comics/anthology/thumb_2.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-2 {
        background-image: url(../data/webp/special/comics/anthology/thumb_2_pc.png.webp)
    }
}

.anthology-list--item.item-3 {
    background-image: url(../data/webp/special/comics/anthology/thumb_3.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-3 {
        background-image: url(../data/webp/special/comics/anthology/thumb_3_pc.png.webp)
    }
}

.anthology-list--item.item-4 {
    background-image: url(../data/webp/special/comics/anthology/thumb_4.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-4 {
        background-image: url(../data/webp/special/comics/anthology/thumb_4_pc.png.webp)
    }
}

.anthology-list--item.item-5 {
    background-image: url(../data/webp/special/comics/anthology/thumb_5.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-5 {
        background-image: url(../data/webp/special/comics/anthology/thumb_5_pc.png.webp)
    }
}

.anthology-list--item.item-6 {
    background-image: url(../data/webp/special/comics/anthology/thumb_6.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-6 {
        background-image: url(../data/webp/special/comics/anthology/thumb_6_pc.png.webp)
    }
}

.anthology-list--item.item-7 {
    background-image: url(../data/webp/special/comics/anthology/thumb_7.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-7 {
        background-image: url(../data/webp/special/comics/anthology/thumb_7_pc.png.webp)
    }
}

.anthology-list--item.item-8 {
    background-image: url(../data/webp/special/comics/anthology/thumb_8.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-8 {
        background-image: url(../data/webp/special/comics/anthology/thumb_8_pc.png.webp)
    }
}

.anthology-list--item.item-9 {
    background-image: url(../data/webp/special/comics/anthology/thumb_9.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-9 {
        background-image: url(../data/webp/special/comics/anthology/thumb_9_pc.png.webp)
    }
}

.anthology-list--item.item-10 {
    background-image: url(../data/webp/special/comics/anthology/thumb_10.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-10 {
        background-image: url(../data/webp/special/comics/anthology/thumb_10_pc.png.webp)
    }
}

.anthology-list--item.item-11 {
    background-image: url(../data/webp/special/comics/anthology/thumb_11.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-11 {
        background-image: url(../data/webp/special/comics/anthology/thumb_11_pc.png.webp)
    }
}

.anthology-list--item.item-12 {
    background-image: url(../data/webp/special/comics/anthology/thumb_12.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-12 {
        background-image: url(../data/webp/special/comics/anthology/thumb_12_pc.png.webp)
    }
}

.anthology-list--item.item-13 {
    background-image: url(../data/webp/special/comics/anthology/thumb_13.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-13 {
        background-image: url(../data/webp/special/comics/anthology/thumb_13_pc.png.webp)
    }
}

.anthology-list--item.item-14 {
    background-image: url(../data/webp/special/comics/anthology/thumb_14.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-14 {
        background-image: url(../data/webp/special/comics/anthology/thumb_14_pc.png.webp)
    }
}

.anthology-list--item.item-15 {
    background-image: url(../data/webp/special/comics/anthology/thumb_15.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-15 {
        background-image: url(../data/webp/special/comics/anthology/thumb_15_pc.png.webp)
    }
}

.anthology-list--item.item-16 {
    background-image: url(../data/webp/special/comics/anthology/thumb_16.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-16 {
        background-image: url(../data/webp/special/comics/anthology/thumb_16_pc.png.webp)
    }
}

.anthology-list--item.item-17 {
    background-image: url(../data/webp/special/comics/anthology/thumb_17.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-17 {
        background-image: url(../data/webp/special/comics/anthology/thumb_17_pc.png.webp)
    }
}

.anthology-list--item.item-18 {
    background-image: url(../data/webp/special/comics/anthology/thumb_18.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-18 {
        background-image: url(../data/webp/special/comics/anthology/thumb_18_pc.png.webp)
    }
}

.anthology-list--item.item-19 {
    background-image: url(../data/webp/special/comics/anthology/thumb_19.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-19 {
        background-image: url(../data/webp/special/comics/anthology/thumb_19_pc.png.webp)
    }
}

.anthology-list--item.item-20 {
    background-image: url(../data/webp/special/comics/anthology/thumb_20.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-20 {
        background-image: url(../data/webp/special/comics/anthology/thumb_20_pc.png.webp)
    }
}

.anthology-list--item.item-21 {
    background-image: url(../data/webp/special/comics/anthology/thumb_21.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-21 {
        background-image: url(../data/webp/special/comics/anthology/thumb_21_pc.png.webp)
    }
}

.anthology-list--item.item-22 {
    background-image: url(../data/webp/special/comics/anthology/thumb_22.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-22 {
        background-image: url(../data/webp/special/comics/anthology/thumb_22_pc.png.webp)
    }
}

.anthology-list--item.item-23 {
    background-image: url(../data/webp/special/comics/anthology/thumb_23.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-23 {
        background-image: url(../data/webp/special/comics/anthology/thumb_23_pc.png.webp)
    }
}

.anthology-list--item.item-24 {
    background-image: url(../data/webp/special/comics/anthology/thumb_24.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-24 {
        background-image: url(../data/webp/special/comics/anthology/thumb_24_pc.png.webp)
    }
}

.anthology-list--item.item-25 {
    background-image: url(../data/webp/special/comics/anthology/thumb_25.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-25 {
        background-image: url(../data/webp/special/comics/anthology/thumb_25_pc.png.webp)
    }
}

.anthology-list--item.item-26 {
    background-image: url(../data/webp/special/comics/anthology/thumb_26.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-26 {
        background-image: url(../data/webp/special/comics/anthology/thumb_26_pc.png.webp)
    }
}

.anthology-list--item.item-27 {
    background-image: url(../data/webp/special/comics/anthology/thumb_27.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-27 {
        background-image: url(../data/webp/special/comics/anthology/thumb_27_pc.png.webp)
    }
}

.anthology-list--item.item-28 {
    background-image: url(../data/webp/special/comics/anthology/thumb_28.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-28 {
        background-image: url(../data/webp/special/comics/anthology/thumb_28_pc.png.webp)
    }
}

.anthology-list--item.item-29 {
    background-image: url(../data/webp/special/comics/anthology/thumb_29.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-29 {
        background-image: url(../data/webp/special/comics/anthology/thumb_29_pc.png.webp)
    }
}

.anthology-list--item.item-30 {
    background-image: url(../data/webp/special/comics/anthology/thumb_30.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-30 {
        background-image: url(../data/webp/special/comics/anthology/thumb_30_pc.png.webp)
    }
}

.anthology-list--item.item-31 {
    background-image: url(../data/webp/special/comics/anthology/thumb_31.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-31 {
        background-image: url(../data/webp/special/comics/anthology/thumb_31_pc.png.webp)
    }
}

.anthology-list--item.item-32 {
    background-image: url(../data/webp/special/comics/anthology/thumb_32.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-32 {
        background-image: url(../data/webp/special/comics/anthology/thumb_32_pc.png.webp)
    }
}

.anthology-list--item.item-33 {
    background-image: url(../data/webp/special/comics/anthology/thumb_33.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-33 {
        background-image: url(../data/webp/special/comics/anthology/thumb_33_pc.png.webp)
    }
}

.anthology-list--item.item-34 {
    background-image: url(../data/webp/special/comics/anthology/thumb_34.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-34 {
        background-image: url(../data/webp/special/comics/anthology/thumb_34_pc.png.webp)
    }
}

.anthology-list--item.item-35 {
    background-image: url(../data/webp/special/comics/anthology/thumb_35.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-35 {
        background-image: url(../data/webp/special/comics/anthology/thumb_35_pc.png.webp)
    }
}

.anthology-list--item.item-36 {
    background-image: url(../data/webp/special/comics/anthology/thumb_36.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-36 {
        background-image: url(../data/webp/special/comics/anthology/thumb_36_pc.png.webp)
    }
}

.anthology-list--item.item-37 {
    background-image: url(../data/webp/special/comics/anthology/thumb_37.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-37 {
        background-image: url(../data/webp/special/comics/anthology/thumb_37_pc.png.webp)
    }
}

.anthology-list--item.item-38 {
    background-image: url(../data/webp/special/comics/anthology/thumb_38.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-38 {
        background-image: url(../data/webp/special/comics/anthology/thumb_38_pc.png.webp)
    }
}

.anthology-list--item.item-39 {
    background-image: url(../data/webp/special/comics/anthology/thumb_39.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-39 {
        background-image: url(../data/webp/special/comics/anthology/thumb_39_pc.png.webp)
    }
}

.anthology-list--item.item-40 {
    background-image: url(../data/webp/special/comics/anthology/thumb_40.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-40 {
        background-image: url(../data/webp/special/comics/anthology/thumb_40_pc.png.webp)
    }
}

.anthology-list--item.item-41 {
    background-image: url(../data/webp/special/comics/anthology/thumb_41.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-41 {
        background-image: url(../data/webp/special/comics/anthology/thumb_41_pc.png.webp)
    }
}

.anthology-list--item.item-42 {
    background-image: url(../data/webp/special/comics/anthology/thumb_42.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-42 {
        background-image: url(../data/webp/special/comics/anthology/thumb_42_pc.png.webp)
    }
}

.anthology-list--item.item-43 {
    background-image: url(../data/webp/special/comics/anthology/thumb_43.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-43 {
        background-image: url(../data/webp/special/comics/anthology/thumb_43_pc.png.webp)
    }
}

.anthology-list--item.item-44 {
    background-image: url(../data/webp/special/comics/anthology/thumb_44.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-44 {
        background-image: url(../data/webp/special/comics/anthology/thumb_44_pc.png.webp)
    }
}

.anthology-list--item.item-45 {
    background-image: url(../data/webp/special/comics/anthology/thumb_45.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-45 {
        background-image: url(../data/webp/special/comics/anthology/thumb_45_pc.png.webp)
    }
}

.anthology-list--item.item-46 {
    background-image: url(../data/webp/special/comics/anthology/thumb_46.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-46 {
        background-image: url(../data/webp/special/comics/anthology/thumb_46_pc.png.webp)
    }
}

.anthology-list--item.item-47 {
    background-image: url(../data/webp/special/comics/anthology/thumb_47.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-47 {
        background-image: url(../data/webp/special/comics/anthology/thumb_47_pc.png.webp)
    }
}

.anthology-list--item.item-48 {
    background-image: url(../data/webp/special/comics/anthology/thumb_48.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-48 {
        background-image: url(../data/webp/special/comics/anthology/thumb_48_pc.png.webp)
    }
}

.anthology-list--item.item-49 {
    background-image: url(../data/webp/special/comics/anthology/thumb_49.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-49 {
        background-image: url(../data/webp/special/comics/anthology/thumb_49_pc.png.webp)
    }
}

.anthology-list--item.item-50 {
    background-image: url(../data/webp/special/comics/anthology/thumb_50.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-50 {
        background-image: url(../data/webp/special/comics/anthology/thumb_50_pc.png.webp)
    }
}

.anthology-list--item.item-51 {
    background-image: url(../data/webp/special/comics/anthology/thumb_51.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-51 {
        background-image: url(../data/webp/special/comics/anthology/thumb_51_pc.png.webp)
    }
}

.anthology-list--item.item-52 {
    background-image: url(../data/webp/special/comics/anthology/thumb_52.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-52 {
        background-image: url(../data/webp/special/comics/anthology/thumb_52_pc.png.webp)
    }
}

.anthology-list--item.item-53 {
    background-image: url(../data/webp/special/comics/anthology/thumb_53.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-53 {
        background-image: url(../data/webp/special/comics/anthology/thumb_53_pc.png.webp)
    }
}

.anthology-list--item.item-54 {
    background-image: url(../data/webp/special/comics/anthology/thumb_54.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-54 {
        background-image: url(../data/webp/special/comics/anthology/thumb_54_pc.png.webp)
    }
}

.anthology-list--item.item-55 {
    background-image: url(../data/webp/special/comics/anthology/thumb_55.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-55 {
        background-image: url(../data/webp/special/comics/anthology/thumb_55_pc.png.webp)
    }
}

.anthology-list--item.item-56 {
    background-image: url(../data/webp/special/comics/anthology/thumb_56.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-56 {
        background-image: url(../data/webp/special/comics/anthology/thumb_56_pc.png.webp)
    }
}

.anthology-list--item.item-57 {
    background-image: url(../data/webp/special/comics/anthology/thumb_57.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-57 {
        background-image: url(../data/webp/special/comics/anthology/thumb_57_pc.png.webp)
    }
}

.anthology-list--item.item-58 {
    background-image: url(../data/webp/special/comics/anthology/thumb_58.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-58 {
        background-image: url(../data/webp/special/comics/anthology/thumb_58_pc.png.webp)
    }
}

.anthology-list--item.item-59 {
    background-image: url(../data/webp/special/comics/anthology/thumb_59.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-59 {
        background-image: url(../data/webp/special/comics/anthology/thumb_59_pc.png.webp)
    }
}

.anthology-list--item.item-60 {
    background-image: url(../data/webp/special/comics/anthology/thumb_60.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-60 {
        background-image: url(../data/webp/special/comics/anthology/thumb_60_pc.png.webp)
    }
}

.anthology-list--item.item-61 {
    background-image: url(../data/webp/special/comics/anthology/thumb_61.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-61 {
        background-image: url(../data/webp/special/comics/anthology/thumb_61_pc.png.webp)
    }
}

.anthology-list--item.item-62 {
    background-image: url(../data/webp/special/comics/anthology/thumb_62.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-62 {
        background-image: url(../data/webp/special/comics/anthology/thumb_62_pc.png.webp)
    }
}

.anthology-list--item.item-63 {
    background-image: url(../data/webp/special/comics/anthology/thumb_63.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-63 {
        background-image: url(../data/webp/special/comics/anthology/thumb_63_pc.png.webp)
    }
}

.anthology-list--item.item-64 {
    background-image: url(../data/webp/special/comics/anthology/thumb_64.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-64 {
        background-image: url(../data/webp/special/comics/anthology/thumb_64_pc.png.webp)
    }
}

.anthology-list--item.item-65 {
    background-image: url(../data/webp/special/comics/anthology/thumb_65.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-65 {
        background-image: url(../data/webp/special/comics/anthology/thumb_65_pc.png.webp)
    }
}

.anthology-list--item.item-66 {
    background-image: url(../data/webp/special/comics/anthology/thumb_66.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-66 {
        background-image: url(../data/webp/special/comics/anthology/thumb_66_pc.png.webp)
    }
}

.anthology-list--item.item-67 {
    background-image: url(../data/webp/special/comics/anthology/thumb_67.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-67 {
        background-image: url(../data/webp/special/comics/anthology/thumb_67_pc.png.webp)
    }
}

.anthology-list--item.item-68 {
    background-image: url(../data/webp/special/comics/anthology/thumb_68.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-68 {
        background-image: url(../data/webp/special/comics/anthology/thumb_68_pc.png.webp)
    }
}

.anthology-list--item.item-69 {
    background-image: url(../data/webp/special/comics/anthology/thumb_69.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-69 {
        background-image: url(../data/webp/special/comics/anthology/thumb_69_pc.png.webp)
    }
}

.anthology-list--item.item-70 {
    background-image: url(../data/webp/special/comics/anthology/thumb_70.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-70 {
        background-image: url(../data/webp/special/comics/anthology/thumb_70_pc.png.webp)
    }
}

.anthology-list--item.item-71 {
    background-image: url(../data/webp/special/comics/anthology/thumb_71.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-71 {
        background-image: url(../data/webp/special/comics/anthology/thumb_71_pc.png.webp)
    }
}

.anthology-list--item.item-72 {
    background-image: url(../data/webp/special/comics/anthology/thumb_72.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-72 {
        background-image: url(../data/webp/special/comics/anthology/thumb_72_pc.png.webp)
    }
}

.anthology-list--item.item-73 {
    background-image: url(../data/webp/special/comics/anthology/thumb_73.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-73 {
        background-image: url(../data/webp/special/comics/anthology/thumb_73_pc.png.webp)
    }
}

.anthology-list--item.item-74 {
    background-image: url(../data/webp/special/comics/anthology/thumb_74.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-74 {
        background-image: url(../data/webp/special/comics/anthology/thumb_74_pc.png.webp)
    }
}

.anthology-list--item.item-75 {
    background-image: url(../data/webp/special/comics/anthology/thumb_75.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-75 {
        background-image: url(../data/webp/special/comics/anthology/thumb_75_pc.png.webp)
    }
}

.anthology-list--item.item-76 {
    background-image: url(../data/webp/special/comics/anthology/thumb_76.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-76 {
        background-image: url(../data/webp/special/comics/anthology/thumb_76_pc.png.webp)
    }
}

.anthology-list--item.item-77 {
    background-image: url(../data/webp/special/comics/anthology/thumb_77.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-77 {
        background-image: url(../data/webp/special/comics/anthology/thumb_77_pc.png.webp)
    }
}

.anthology-list--item.item-78 {
    background-image: url(../data/webp/special/comics/anthology/thumb_78.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-78 {
        background-image: url(../data/webp/special/comics/anthology/thumb_78_pc.png.webp)
    }
}

.anthology-list--item.item-79 {
    background-image: url(../data/webp/special/comics/anthology/thumb_79.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-79 {
        background-image: url(../data/webp/special/comics/anthology/thumb_79_pc.png.webp)
    }
}

.anthology-list--item.item-80 {
    background-image: url(../data/webp/special/comics/anthology/thumb_80.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-80 {
        background-image: url(../data/webp/special/comics/anthology/thumb_80_pc.png.webp)
    }
}

.anthology-list--item.item-81 {
    background-image: url(../data/webp/special/comics/anthology/thumb_81.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-81 {
        background-image: url(../data/webp/special/comics/anthology/thumb_81_pc.png.webp)
    }
}

.anthology-list--item.item-82 {
    background-image: url(../data/webp/special/comics/anthology/thumb_82.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-82 {
        background-image: url(../data/webp/special/comics/anthology/thumb_82_pc.png.webp)
    }
}

.anthology-list--item.item-83 {
    background-image: url(../data/webp/special/comics/anthology/thumb_83.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-83 {
        background-image: url(../data/webp/special/comics/anthology/thumb_83_pc.png.webp)
    }
}

.anthology-list--item.item-84 {
    background-image: url(../data/webp/special/comics/anthology/thumb_84.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-84 {
        background-image: url(../data/webp/special/comics/anthology/thumb_84_pc.png.webp)
    }
}

.anthology-list--item.item-85 {
    background-image: url(../data/webp/special/comics/anthology/thumb_85.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-85 {
        background-image: url(../data/webp/special/comics/anthology/thumb_85_pc.png.webp)
    }
}

.anthology-list--item.item-86 {
    background-image: url(../data/webp/special/comics/anthology/thumb_86.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-86 {
        background-image: url(../data/webp/special/comics/anthology/thumb_86_pc.png.webp)
    }
}

.anthology-list--item.item-87 {
    background-image: url(../data/webp/special/comics/anthology/thumb_87.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-87 {
        background-image: url(../data/webp/special/comics/anthology/thumb_87_pc.png.webp)
    }
}

.anthology-list--item.item-88 {
    background-image: url(../data/webp/special/comics/anthology/thumb_88.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-88 {
        background-image: url(../data/webp/special/comics/anthology/thumb_88_pc.png.webp)
    }
}

.anthology-list--item.item-89 {
    background-image: url(../data/webp/special/comics/anthology/thumb_89.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-89 {
        background-image: url(../data/webp/special/comics/anthology/thumb_89_pc.png.webp)
    }
}

.anthology-list--item.item-90 {
    background-image: url(../data/webp/special/comics/anthology/thumb_90.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-90 {
        background-image: url(../data/webp/special/comics/anthology/thumb_90_pc.png.webp)
    }
}

.anthology-list--item.item-91 {
    background-image: url(../data/webp/special/comics/anthology/thumb_91.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-91 {
        background-image: url(../data/webp/special/comics/anthology/thumb_91_pc.png.webp)
    }
}

.anthology-list--item.item-92 {
    background-image: url(../data/webp/special/comics/anthology/thumb_92.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-92 {
        background-image: url(../data/webp/special/comics/anthology/thumb_92_pc.png.webp)
    }
}

.anthology-list--item.item-93 {
    background-image: url(../data/webp/special/comics/anthology/thumb_93.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-93 {
        background-image: url(../data/webp/special/comics/anthology/thumb_93_pc.png.webp)
    }
}

.anthology-list--item.item-94 {
    background-image: url(../data/webp/special/comics/anthology/thumb_94.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-94 {
        background-image: url(../data/webp/special/comics/anthology/thumb_94_pc.png.webp)
    }
}

.anthology-list--item.item-95 {
    background-image: url(../data/webp/special/comics/anthology/thumb_95.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-95 {
        background-image: url(../data/webp/special/comics/anthology/thumb_95_pc.png.webp)
    }
}

.anthology-list--item.item-96 {
    background-image: url(../data/webp/special/comics/anthology/thumb_96.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-96 {
        background-image: url(../data/webp/special/comics/anthology/thumb_96_pc.png.webp)
    }
}

.anthology-list--item.item-97 {
    background-image: url(../data/webp/special/comics/anthology/thumb_97.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-97 {
        background-image: url(../data/webp/special/comics/anthology/thumb_97_pc.png.webp)
    }
}

.anthology-list--item.item-98 {
    background-image: url(../data/webp/special/comics/anthology/thumb_98.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-98 {
        background-image: url(../data/webp/special/comics/anthology/thumb_98_pc.png.webp)
    }
}

.anthology-list--item.item-99 {
    background-image: url(../data/webp/special/comics/anthology/thumb_99.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-99 {
        background-image: url(../data/webp/special/comics/anthology/thumb_99_pc.png.webp)
    }
}

.anthology-list--item.item-100 {
    background-image: url(../data/webp/special/comics/anthology/thumb_100.png.webp)
}

@media only screen and (min-width:767px) {
    .anthology-list--item.item-100 {
        background-image: url(../data/webp/special/comics/anthology/thumb_100_pc.png.webp)
    }
}

.hitokoma-list--tit {
    text-align: center;
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .hitokoma-list--tit {
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .hitokoma-list--tit {
        margin: 60px 0 0
    }
}

.hitokoma-list--tit span {
    border-radius: .4vw;
    background-color: #80ffec;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    line-height: 1;
    padding: .1333333333vw .6666666667vw .6666666667vw;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .hitokoma-list--tit span {
        border-radius: .1875vw;
        padding: 0 .3125vw .25vw;
        font-size: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .hitokoma-list--tit span {
        border-radius: 3px;
        padding: 0 5px 4px;
        font-size: 32px
    }
}

.hitokoma-list--inner {
    text-align: center;
    padding: 0 8vw
}

@media only screen and (min-width:767px) {
    .hitokoma-list--inner {
        width: 75vw;
        padding: 0;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap
    }
}

@media only screen and (min-width:1400px) {
    .hitokoma-list--inner {
        width: 1200px
    }
}

.hitokoma-list--item {
    display: block;
    margin: 6.6666666667vw 0 0
}

@media only screen and (max-width:767px) {
    .hitokoma-list--item:first-child {
        margin: 4vw 0 0
    }
}

@media only screen and (min-width:767px) {
    .hitokoma-list--item {
        width: 23.125vw;
        margin: 4.0625vw 2.5vw 0 0;
        transition: .2s
    }

    .hitokoma-list--item:nth-child(3n) {
        margin: 4.0625vw 0 0
    }

    .hitokoma-list--item:hover .hitokoma-list--thumb {
        box-shadow: none
    }

    .hitokoma-list--item:hover .hitokoma-list--name {
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .hitokoma-list--item {
        width: 370px;
        margin: 65px 40px 0 0;
        transition: .2s
    }

    .hitokoma-list--item:nth-child(3n) {
        margin: 65px 0 0
    }
}

.hitokoma-list--thumb {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    display: block
}

@media only screen and (min-width:767px) {
    .hitokoma-list--thumb {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:1400px) {
    .hitokoma-list--thumb {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1)
    }
}

.hitokoma-list--name {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 4.2666666667vw;
    line-height: 2;
    display: inline-block;
    margin: 2.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .hitokoma-list--name {
        font-size: 1.25vw;
        line-height: 1.6;
        margin: .9375vw 0 0;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .hitokoma-list--name {
        font-size: 20px;
        margin: 15px 0 0
    }
}

.dl-contents--tit {
    text-align: center;
    margin: 8vw 0 .6666666667vw
}

@media only screen and (min-width:767px) {
    .dl-contents--tit {
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-contents--tit {
        margin: 60px 0 0
    }
}

.dl-contents--tit span {
    border-radius: .4vw;
    background-color: #80ffec;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.8vw;
    line-height: 1;
    padding: .1333333333vw .6666666667vw .6666666667vw;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .dl-contents--tit span {
        border-radius: .1875vw;
        padding: 0 .3125vw .25vw;
        font-size: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .dl-contents--tit span {
        border-radius: 3px;
        padding: 0 5px 4px;
        font-size: 32px
    }
}

.dl-icon--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .dl-icon--list {
        width: 66.25vw;
        margin: 1.5625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-icon--list {
        width: 1060px;
        margin: 25px auto 0
    }
}

@media only screen and (min-width:767px) {
    .dl-icon--list:nth-child(n+2) {
        margin: 0 auto
    }
}

.dl-icon--list-item {
    flex-basis: 28vw;
    margin: 4vw 1.3333333333vw 0
}

@media only screen and (min-width:767px) {
    .dl-icon--list-item {
        flex-basis: 8.125vw;
        margin: 1.25vw .625vw 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-icon--list-item {
        flex-basis: 130px;
        margin: 20px 10px 0
    }
}

.dl-icon--list-item img {
    pointer-events: auto
}

.dl-frame--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .dl-frame--list {
        width: 62.5vw;
        margin: 1.5625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-frame--list {
        width: 1000px;
        margin: 25px auto 0
    }
}

.dl-frame--list-item {
    flex-basis: 26.6666666667vw;
    margin: 4vw 2.6666666667vw 0
}

@media only screen and (min-width:767px) {
    .dl-frame--list-item {
        flex-basis: 9.375vw;
        margin: 1.25vw .625vw 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-frame--list-item {
        flex-basis: 150px;
        margin: 20px 10px 0
    }
}

.dl-frame--list-item img {
    pointer-events: auto
}

.dl-header--list {
    padding: 0 4vw
}

@media only screen and (min-width:767px) {
    .dl-header--list {
        width: 56.25vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .dl-header--list {
        width: 900px
    }
}

.dl-header--list-item {
    margin: 4vw 0 0
}

@media only screen and (min-width:767px) {
    .dl-header--list-item {
        margin: 2.5vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-header--list-item {
        margin: 40px auto 0
    }
}

.dl-header--list-item:first-child {
    margin: 5.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .dl-header--list-item:first-child {
        margin: 3.125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-header--list-item:first-child {
        margin: 50px auto 0
    }
}

.dl-header--list-item img {
    pointer-events: auto
}

.dl-bg--item {
    padding: 0 4vw;
    margin: 6vw 0 0
}

@media only screen and (min-width:767px) {
    .dl-bg--item {
        width: 56.25vw;
        padding: 0;
        margin: 3.75vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-bg--item {
        width: 900px;
        margin: 60px auto 0
    }
}

.dl-bg--item img {
    pointer-events: auto
}

.dl-wallpaper {
    width: 92vw;
    margin: 6vw auto 0;
    display: flex;
    justify-content: space-between
}

@media only screen and (min-width:767px) {
    .dl-wallpaper {
        width: 56.25vw;
        margin: 2.5vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-wallpaper {
        width: 900px;
        margin: 40px auto 0
    }
}

.dl-wallpaper--item.android {
    flex-basis: 61.3333333333vw
}

@media only screen and (min-width:767px) {
    .dl-wallpaper--item.android {
        flex-basis: 38vw
    }
}

@media only screen and (min-width:1400px) {
    .dl-wallpaper--item.android {
        flex-basis: 608px
    }
}

.dl-wallpaper--item.iphone {
    flex-basis: 25.0666666667vw
}

@media only screen and (min-width:767px) {
    .dl-wallpaper--item.iphone {
        flex-basis: 15.625vw
    }
}

@media only screen and (min-width:1400px) {
    .dl-wallpaper--item.iphone {
        flex-basis: 250px
    }
}

.dl-wallpaper--item img {
    pointer-events: auto
}

.dl-wallpaper--item-name {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    text-align: center;
    font-size: 3.2vw;
    margin: 2.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .dl-wallpaper--item-name {
        font-size: 1.5vw;
        margin: .9375vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-wallpaper--item-name {
        font-size: 24px;
        margin: 15px 0 0
    }
}

.dl-craft--tit {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 3.2vw;
    text-align: center;
    margin: 8vw 0 3.3333333333vw
}

@media only screen and (min-width:767px) {
    .dl-craft--tit {
        font-size: 1.5vw;
        margin: 3.75vw 0 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .dl-craft--tit {
        font-size: 24px;
        margin: 60px 0 25px
    }
}

.dl-craft--text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.6666666667vw;
    line-height: 1.7;
    text-align: center
}

@media only screen and (min-width:767px) {
    .dl-craft--text {
        font-size: 1vw;
        line-height: 1.5
    }
}

@media only screen and (min-width:1400px) {
    .dl-craft--text {
        font-size: 16px
    }
}

.dl-craft--manual {
    width: 92vw;
    margin: 4vw auto 0;
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .dl-craft--manual {
        transition: .2s all
    }

    .dl-craft--manual:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .dl-craft--manual {
        width: 21.875vw;
        margin: 1.875vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-craft--manual {
        width: 350px;
        margin: 30px auto 0
    }
}

.dl-craft--list {
    padding: 0 4vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .dl-craft--list {
        width: 62.5vw;
        padding: 0;
        margin: 2.5vw auto 0;
        gap: 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .dl-craft--list {
        width: 1000px;
        gap: 25px;
        margin: 40px auto 0
    }
}

.dl-craft--list-pdf {
    flex-basis: 42.6666666667vw;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    margin: 4vw 0 0
}

@media only screen and (min-width:767px) {
    .dl-craft--list-pdf {
        transition: .2s all
    }

    .dl-craft--list-pdf:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .dl-craft--list-pdf {
        flex-basis: 15.625vw;
        padding: 0;
        margin: 0
    }
}

@media only screen and (min-width:1400px) {
    .dl-craft--list-pdf {
        flex-basis: 250px
    }
}

@media only screen and (max-width:767px) {
    .dl-craft--list-pdf:nth-child(even) {
        margin: 4vw 0 0 4vw
    }
}

.page-main {
    border-radius: 0 0 3.3333333333vw 3.3333333333vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    width: 100%;
    padding: 2vw 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-main {
        background-size: cover;
        border-radius: 0 0 1.875vw 1.875vw;
        width: 100vw;
        padding: 0
    }
}

@media only screen and (min-width:1400px) {
    .page-main {
        border-radius: 0 0 30px 30px;
        width: 100%
    }
}

.page-main--title {
    background-position: center center;
    background-repeat: repeat-x;
    background-size: auto 16vw;
    width: 100%;
    padding: 2.6666666667vw 0;
    margin-top: -1.3333333333vw;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-main--title {
        background-size: auto 7.5vw;
        padding: 1.25vw 0;
        margin-top: 0
    }
}

@media only screen and (min-width:1400px) {
    .page-main--title {
        background-size: auto 120px;
        padding: 20px 0
    }
}

.page-main--title-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 10.6666666667vw;
    line-height: 1;
    text-align: center
}

@media only screen and (min-width:767px) {
    .page-main--title-text {
        font-size: 5vw
    }
}

@media only screen and (min-width:1400px) {
    .page-main--title-text {
        font-size: 80px
    }
}

.page-main.character {
    background-image: url(../data/webp/character/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.character {
        background-image: url(../data/webp/character/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.character {
        height: 264px
    }
}

.page-main.character .page-main--title {
    background-image: url(../svg/heading_character.svg)
}

@media only screen and (min-width:767px) {
    .page-main.character .page-main--title {
        margin: -1.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-main.character .page-main--title {
        margin: -20px 0 0
    }
}

.page-main.relationship {
    background-image: url(../data/webp/relationship/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.relationship {
        background-image: url(../data/webp/relationship/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.relationship {
        height: 264px
    }
}

.page-main.relationship .page-main--title {
    background-image: url(../svg/heading_relationship.svg)
}

.page-main.story {
    background-image: url(../data/webp/story/bg_heading.png.webp);
    height: 50.2666666667vw
}

@media only screen and (min-width:767px) {
    .page-main.story {
        background-image: url(../data/webp/story/bg_heading_pc.png.webp);
        height: 20.125vw
    }
}

@media only screen and (min-width:1400px) {
    .page-main.story {
        height: 322px
    }
}

.page-main.story .page-main--title {
    background-image: url(../svg/heading_story.svg)
}

@media only screen and (min-width:767px) {
    .page-main.story .page-main--title {
        margin: -1.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-main.story .page-main--title {
        margin: -20px 0 0
    }
}

.page-main.news,
.page-main.news_archive {
    background-image: url(../data/webp/news/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {

    .page-main.news,
    .page-main.news_archive {
        background-image: url(../data/webp/news/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto -2.5vw
    }
}

@media only screen and (min-width:1400px) {

    .page-main.news,
    .page-main.news_archive {
        height: 264px;
        margin: 0 auto -40px
    }
}

.page-main.news .page-main--title,
.page-main.news_archive .page-main--title {
    background-image: url(../svg/heading_news.svg)
}

.page-main.system {
    background-image: url(../data/webp/system/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.system {
        background-image: url(../data/webp/system/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.system {
        height: 264px
    }
}

.page-main.system .page-main--title {
    background-image: url(../svg/heading_system.svg)
}

.page-main.music {
    background-image: url(../data/webp/music/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.music {
        background-image: url(../data/webp/music/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.music {
        height: 264px
    }
}

.page-main.music .page-main--title {
    background-image: url(../svg/heading_music.svg)
}

.page-main.note {
    background-image: url(../data/webp/note/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.note {
        background-image: url(../data/webp/note/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.note {
        height: 264px
    }
}

.page-main.note .page-main--title {
    background-image: url(../svg/heading_note.svg)
}

.page-main.faq {
    background-image: url(../data/webp/faq/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.faq {
        background-image: url(../data/webp/faq/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.faq {
        height: 264px
    }
}

.page-main.faq .page-main--title {
    background-image: url(../svg/heading_faq.svg);
    background-size: auto 20vw;
    padding: 2.6666666667vw 0 6.6666666667vw;
    margin-top: 2vw
}

@media only screen and (min-width:767px) {
    .page-main.faq .page-main--title {
        background-size: auto 9.375vw;
        padding: 1.25vw 0 3.125vw
    }
}

@media only screen and (min-width:1400px) {
    .page-main.faq .page-main--title {
        background-size: auto 150px;
        padding: 20px 0 50px
    }
}

.page-main.special,
.page-main.special-comics,
.page-main.special-dl {
    background-image: url(../data/webp/special/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {

    .page-main.special,
    .page-main.special-comics,
    .page-main.special-dl {
        background-image: url(../data/webp/special/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {

    .page-main.special,
    .page-main.special-comics,
    .page-main.special-dl {
        height: 264px
    }
}

.page-main.special .page-main--title,
.page-main.special-comics .page-main--title,
.page-main.special-dl .page-main--title {
    background-image: url(../svg/heading_special.svg)
}

.page-main.guideline {
    background-image: url(../data/webp/guideline/bg_heading.png.webp);
    height: 39.6vw;
    padding: 12vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main.guideline {
        background-image: url(../data/webp/guideline/bg_heading_pc.png.webp);
        height: 16.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .page-main.guideline {
        height: 264px
    }
}

.page-main.guideline .page-main--title {
    background-image: url(../svg/heading_guideline.svg)
}

.page-sec {
    border-radius: 1.0666666667vw;
    background: rgba(255, 255, 255, .8);
    width: 92vw;
    margin: 21.3333333333vw auto 0;
    position: relative;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .page-sec {
        border-radius: .625vw;
        width: 75vw;
        margin: 4.0625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sec {
        border-radius: 10px;
        width: 1200px;
        margin: 65px auto 0
    }
}

.page-sec:first-of-type {
    margin: -13.0666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .page-sec:first-of-type {
        margin: -5.125vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sec:first-of-type {
        margin: -82px auto 0
    }
}

.page-sec--tit {
    background: linear-gradient(90deg, #e1e1e7 0, rgba(225, 225, 231, .8) 50%);
    height: 23.3333333333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

@media only screen and (min-width:767px) {
    .page-sec--tit {
        height: 11.375vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sec--tit {
        height: 182px
    }
}

.page-sec--tit span {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 8vw;
    line-height: 1
}

@media only screen and (min-width:767px) {
    .page-sec--tit span {
        font-size: 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sec--tit span {
        font-size: 60px
    }
}

.page-sec--tit small {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 2.6666666667vw;
    letter-spacing: .4em;
    line-height: 1;
    margin: 2.1333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .page-sec--tit small {
        font-size: 1vw;
        margin: 1.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sec--tit small {
        font-size: 16px;
        margin: 20px 0 0
    }
}

.page-contents {
    margin: 8.6666666667vw auto 0;
    position: relative;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .page-contents {
        margin: 3.75vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-contents {
        margin: 60px auto 0
    }
}

.page-contents--img {
    width: 92vw;
    margin: 0 auto
}

.page-contents--img:nth-child(n+2) {
    margin: 16vw auto 0
}

@media only screen and (min-width:767px) {
    .page-contents--img {
        width: 67.5vw
    }

    .page-contents--img:nth-child(n+2) {
        margin: 4.0625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-contents--img {
        width: 1080px
    }

    .page-contents--img:nth-child(n+2) {
        margin: 65px auto 0
    }
}

.page-contents--topbtn {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    cursor: pointer;
    pointer-events: auto;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    position: fixed;
    bottom: 4vw;
    right: 4vw;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .page-contents--topbtn {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .page-contents--topbtn {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .page-contents--topbtn:hover {
        box-shadow: none;
        background-color: #446
    }
}

.page-contents--topbtn:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .2s
}

@media only screen and (min-width:767px) {
    .page-contents--topbtn {
        width: 4vw;
        height: 4vw;
        bottom: 2vw;
        right: 2vw
    }

    .page-contents--topbtn:hover:before {
        background-image: url(../data/webp/icon/icon_anc_arw_s_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .page-contents--topbtn {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        width: 64px;
        height: 64px;
        bottom: 32px;
        right: 32px
    }
}

.page-contents--topbtn:before {
    background-image: url(../data/webp/icon/icon_anc_arw_s.png.webp);
    width: 4.6666666667vw;
    height: 3.3333333333vw;
    transform: translate(-50%, -50%) rotate(-180deg)
}

@media only screen and (min-width:767px) {
    .page-contents--topbtn:before {
        width: 2.1875vw;
        height: 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .page-contents--topbtn:before {
        width: 35px;
        height: 25px
    }
}

.page-contents--attention {
    text-align: center;
    margin: 0 0 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .page-contents--attention {
        margin: 0 0 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .page-contents--attention {
        margin: 0 0 40px
    }
}

.page-contents--attention span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.6666666667vw;
    line-height: 1.6;
    display: block
}

@media only screen and (min-width:767px) {
    .page-contents--attention span {
        font-size: .875vw;
        line-height: 1.5714285714
    }
}

@media only screen and (min-width:1400px) {
    .page-contents--attention span {
        font-size: 14px
    }
}

.page-sub {
    margin: 20vw 0 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-sub {
        margin: 10vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub {
        margin: 160px 0 0
    }
}

.page-sub--tit {
    background: linear-gradient(90deg, rgba(68, 68, 102, .8) 0, rgba(68, 68, 102, .6) 100%);
    width: 100%;
    padding: 5.6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .page-sub--tit {
        padding: 2.6875vw 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--tit {
        padding: 43px 100px
    }
}

.page-sub--tit.even {
    background: linear-gradient(90deg, rgba(68, 68, 102, .6) 0, rgba(68, 68, 102, .8) 100%)
}

.page-sub--tit-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center
}

@media only screen and (min-width:767px) {
    .page-sub--tit-text {
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--tit-text {
        font-size: 48px
    }
}

.page-sub--tit-text small {
    font-size: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .page-sub--tit-text small {
        font-size: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--tit-text small {
        font-size: 40px
    }
}

.page-sub--contents {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    background: #fff;
    padding: 3.3333333333vw 4vw 8vw;
    width: 92vw;
    margin: 8vw auto 0;
    overflow: hidden;
    display: block;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-sub--contents {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .3125vw;
        width: 62.5vw;
        padding: 1.5625vw 2.5vw 3.4375vw;
        margin: 2.5vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 5px;
        width: 1000px;
        padding: 25px 40px 55px;
        margin: 40px auto 0
    }
}

.page-sub--contents-tit {
    border-bottom: 1px solid #446;
    padding: 4vw 0 3.6vw
}

@media only screen and (min-width:767px) {
    .page-sub--contents-tit {
        padding: 1.875vw 0 .75vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-tit {
        padding: 30px 0 12px
    }
}

.page-sub--contents-tit span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw;
    line-height: 1.65
}

@media only screen and (min-width:767px) {
    .page-sub--contents-tit span {
        font-size: 1.625vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-tit span {
        font-size: 26px
    }
}

.page-sub--contents-subtit {
    border-radius: .6666666667vw;
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .8) 100%);
    width: 81.3333333333vw;
    padding: 2vw 2.6666666667vw 1.6vw;
    margin: 8.6666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-subtit {
        border-radius: .3125vw;
        width: 100%;
        padding: .9375vw 1.25vw .75vw;
        margin: 4.0625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-subtit {
        border-radius: 5px;
        padding: 15px 20px 12px;
        margin: 65px auto 0
    }
}

.page-sub--contents-subtit span {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    color: #fff;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .page-sub--contents-subtit span {
        font-size: 1.5vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-subtit span {
        font-size: 24px
    }
}

.page-sub--contents-icontit {
    padding: 0 1.3333333333vw;
    margin: 5.3333333333vw auto 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-sub--contents-icontit {
        padding: 0;
        margin: 2.8125vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-icontit {
        margin: 45px auto 0
    }
}

.page-sub--contents-icontit:before {
    display: block;
    content: "";
    background: url(../data/webp/icon/icon_triangle.png.webp) no-repeat 0 0/contain;
    width: 2.9333333333vw;
    height: 3.4666666667vw;
    position: absolute;
    top: .2666666667vw;
    left: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .page-sub--contents-icontit:before {
        width: 1.0625vw;
        height: 1.125vw;
        top: 0;
        left: 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-icontit:before {
        width: 17px;
        height: 18px
    }
}

.page-sub--contents-icontit span {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    display: inline-block;
    margin: 0 0 0 4.6666666667vw
}

@media only screen and (min-width:767px) {
    .page-sub--contents-icontit span {
        font-size: 1.125vw;
        margin: 0 0 0 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-icontit span {
        font-size: 18px;
        margin: 0 0 0 30px
    }
}

.page-sub--contents-emtit {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    line-height: 1.5;
    margin: 5.3333333333vw 0 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-sub--contents-emtit {
        font-size: 1.125vw;
        margin: 2.5vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-emtit {
        font-size: 18px;
        margin: 40px 0 0
    }
}

.page-sub--contents-texttit {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    margin: 3.6vw 0 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-texttit {
        font-size: 1vw;
        margin: 1.5625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-texttit {
        font-size: 16px;
        margin: 25px 0 0
    }
}

.page-sub--contents-texttit+.page-sub--contents-text {
    margin: .6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-texttit+.page-sub--contents-text {
        margin: .3125vw 0 -.625vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-texttit+.page-sub--contents-text {
        margin: 5px 0 -10px
    }
}

.page-sub--contents-img {
    margin: 4vw auto 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-img {
        text-align: center;
        margin: 1.5625vw auto 0
    }

    .page-sub--contents-img img {
        width: auto;
        max-width: 57.5vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-img {
        margin: 25px auto 0
    }

    .page-sub--contents-img img {
        max-width: 920px
    }
}

.page-sub--contents-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 2;
    padding: 0 1.3333333333vw;
    margin: 4vw 0 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-text {
        font-size: 1vw;
        line-height: 1.85;
        padding: 0;
        margin: 1.5625vw 0 -.625vw
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-text {
        font-size: 16px;
        margin: 25px 0 -10px
    }
}

.page-sub--contents-text.right {
    text-align: right
}

.page-sub--contents-text__link {
    display: block
}

.page-sub--contents-text a {
    color: #f7a;
    display: inline;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .page-sub--contents-text a {
        background-image: linear-gradient(90deg, #f7a, #f7a);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 1px;
        transition: background-size .2s
    }

    .page-sub--contents-text a:hover {
        background-size: 100% 0
    }
}

.page-sub--contents-points {
    margin: 2.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-points {
        margin: .625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-points {
        margin: 10px 0 0
    }
}

.page-sub--contents-points li {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 2;
    padding: 0 0 0 1.25em;
    text-indent: -1.25em;
    margin: .4vw 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-points li {
        font-size: 1vw;
        margin: .1875vw 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-points li {
        font-size: 16px;
        margin: 3px 0
    }
}

.page-sub--contents-points li__link {
    display: block
}

.page-sub--contents-points li a {
    color: #f7a;
    display: inline;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .page-sub--contents-points li a {
        background-image: linear-gradient(90deg, #f7a, #f7a);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 1px;
        transition: background-size .2s
    }

    .page-sub--contents-points li a:hover {
        background-size: 100% 0
    }
}

.page-sub--contents-list {
    margin: 2.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .page-sub--contents-list {
        margin: .625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-list {
        margin: 10px 0 0
    }
}

.page-sub--contents-list li {
    list-style: decimal;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 2;
    margin: .9333333333vw 0 .9333333333vw 1.5em
}

@media only screen and (min-width:767px) {
    .page-sub--contents-list li {
        font-size: 1vw;
        margin: .4375vw 0 .4375vw 1.5em
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-list li {
        font-size: 16px;
        margin: 7px 0 7px 1.5em
    }
}

.page-sub--contents-sublist {
    margin: 0
}

.page-sub--contents-sublist li {
    list-style: none;
    counter-increment: cnt;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 2;
    margin: .9333333333vw 0 .9333333333vw 1.5em;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-sub--contents-sublist li {
        font-size: 1vw;
        margin: .4375vw 0 .4375vw 1.5em
    }
}

@media only screen and (min-width:1400px) {
    .page-sub--contents-sublist li {
        font-size: 16px;
        margin: 7px 0 7px 1.5em
    }
}

.page-sub--contents-sublist li:before {
    display: block;
    content: "";
    content: "(" counter(cnt) ")";
    display: inline-block;
    margin-left: -3.5em;
    width: 3em;
    text-align: right;
    position: absolute;
    top: 0;
    left: 0
}

.nf-sec--inner {
    padding: 40vw 0 19.3333333333vw;
    text-align: center
}

@media only screen and (min-width:767px) {
    .nf-sec--inner {
        padding: 11.875vw 0 2.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .nf-sec--inner {
        padding: 190px 0 45px
    }
}

.nf-sec--tit {
    padding: 0 0 7.3333333333vw;
    margin: 0 0 6.6666666667vw;
    position: relative
}

@media only screen and (min-width:767px) {
    .nf-sec--tit {
        padding: 0 0 2.8125vw;
        margin: 0 0 2.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .nf-sec--tit {
        padding: 0 0 45px;
        margin: 0 0 35px
    }
}

.nf-sec--tit:after {
    display: block;
    content: "";
    background: #446;
    width: 48vw;
    height: .8vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0
}

@media only screen and (min-width:767px) {
    .nf-sec--tit:after {
        width: 16.0625vw;
        height: .25vw
    }
}

@media only screen and (min-width:1400px) {
    .nf-sec--tit:after {
        width: 257px;
        height: 4px
    }
}

.nf-sec--tit em {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 21.7333333333vw;
    letter-spacing: .08em;
    font-style: normal;
    line-height: 1;
    display: block
}

@media only screen and (min-width:767px) {
    .nf-sec--tit em {
        font-size: 7.5vw
    }
}

@media only screen and (min-width:1400px) {
    .nf-sec--tit em {
        font-size: 120px
    }
}

.nf-sec--tit span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 6.6666666667vw;
    letter-spacing: .08em;
    line-height: 1;
    margin: 2.6666666667vw 0 0;
    display: block
}

@media only screen and (min-width:767px) {
    .nf-sec--tit span {
        font-size: 2.3125vw;
        margin: .9375vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .nf-sec--tit span {
        font-size: 37px;
        margin: 15px 0 0
    }
}

.nf-sec--text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.6666666667vw;
    letter-spacing: .08em
}

@media only screen and (min-width:767px) {
    .nf-sec--text {
        font-size: .875vw
    }
}

@media only screen and (min-width:1400px) {
    .nf-sec--text {
        font-size: 14px
    }
}

.sort-btn {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 .6666666667vw 1.3333333333vw 0 rgba(68, 68, 102, .1);
    cursor: pointer;
    pointer-events: auto;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    position: fixed;
    right: 4vw;
    bottom: 4vw;
    z-index: 11
}

@media only screen and (min-width:767px) {
    .sort-btn {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .sort-btn:hover {
        box-shadow: none;
        background-color: #446
    }
}

.sort-btn:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .2s
}

@media only screen and (min-width:767px) {
    .sort-btn {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .13);
        width: 4vw;
        height: 4vw;
        bottom: 2vw;
        right: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        width: 64px;
        height: 64px;
        right: 32px;
        bottom: 32px
    }
}

@media only screen and (min-width:767px) {
    .sort-btn:hover .sort-btn--line {
        background-color: #0cb
    }

    .sort-btn:hover .sort-btn--line:before {
        background-color: #446;
        border: #0cb solid .1875vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn:hover .sort-btn--line:before {
        background-color: #446;
        border: #0cb solid 3px
    }
}

.sort-btn--line {
    background-color: #446;
    width: 6.1333333333vw;
    height: .8vw;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s
}

@media only screen and (min-width:767px) {
    .sort-btn--line {
        width: 2vw;
        height: .25vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn--line {
        width: 36px;
        height: 4px
    }
}

.sort-btn--line:before {
    display: block;
    content: "";
    border-radius: 50%;
    border: #446 solid .4vw;
    background-color: #fff;
    width: 2vw;
    height: 2vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@media only screen and (min-width:767px) {
    .sort-btn--line:before {
        border: #446 solid .1875vw;
        width: .6875vw;
        height: .6875vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn--line:before {
        border: #446 solid 3px;
        width: 11px;
        height: 11px
    }
}

.sort-btn--line:first-child {
    top: 4vw
}

@media only screen and (min-width:767px) {
    .sort-btn--line:first-child {
        top: 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn--line:first-child {
        top: 25px
    }
}

.sort-btn--line:first-child:before {
    right: .9333333333vw
}

@media only screen and (min-width:767px) {
    .sort-btn--line:first-child:before {
        right: .3125vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn--line:first-child:before {
        right: 5px
    }
}

.sort-btn--line:nth-child(2) {
    top: 6.1333333333vw
}

@media only screen and (min-width:767px) {
    .sort-btn--line:nth-child(2) {
        top: 2.25vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn--line:nth-child(2) {
        top: 36px
    }
}

.sort-btn--line:nth-child(2):before {
    left: .9333333333vw
}

@media only screen and (min-width:767px) {
    .sort-btn--line:nth-child(2):before {
        left: .3125vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn--line:nth-child(2):before {
        left: 5px
    }
}

.sort-btn.js-open .sort-btn--line {
    height: .9333333333vw
}

@media only screen and (min-width:767px) {
    .sort-btn.js-open .sort-btn--line {
        height: .375vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn.js-open .sort-btn--line {
        height: 6px
    }
}

.sort-btn.js-open .sort-btn--line:before {
    content: none
}

.sort-btn.js-open .sort-btn--line:first-child {
    top: 4.9333333333vw;
    transform: translateX(-50%) rotate(42deg)
}

@media only screen and (min-width:767px) {
    .sort-btn.js-open .sort-btn--line:first-child {
        top: 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn.js-open .sort-btn--line:first-child {
        top: 30px
    }
}

.sort-btn.js-open .sort-btn--line:nth-child(2) {
    top: 4.9333333333vw;
    transform: translateX(-50%) rotate(-40deg)
}

@media only screen and (min-width:767px) {
    .sort-btn.js-open .sort-btn--line:nth-child(2) {
        top: 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-btn.js-open .sort-btn--line:nth-child(2) {
        top: 30px
    }
}

.sort-menu {
    background: url(../data/webp/common/bg_parts_navi.png.webp) no-repeat right bottom/35% auto;
    background-color: #ebebf2;
    border-radius: 4vw 4vw 0 0;
    width: 100%;
    min-height: 108.6666666667vw;
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: .3s cubic-bezier(.2, .65, .36, 1);
    will-change: opacity;
    pointer-events: none;
    z-index: 10;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .sort-menu {
        background: url(../data/webp/common/bg_parts_navi.png.webp) no-repeat right bottom/60% auto;
        background-color: #ebebf2;
        border-radius: 0;
        width: 24.5vw;
        height: 100vh;
        min-height: auto
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu {
        width: 392px
    }
}

.sort-menu.js-open {
    opacity: 1;
    pointer-events: auto
}

.sort-menu--tit {
    background-color: #446;
    width: 100%;
    height: 12.2666666667vw;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .sort-menu--tit {
        height: 4.125vw;
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu--tit {
        height: 66px;
        font-size: 16px
    }
}

.sort-menu--contents {
    padding: 0 4vw 20vw;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.sort-menu--contents::-webkit-scrollbar {
    display: none
}

@media only screen and (min-width:767px) {
    .sort-menu--contents {
        height: calc(100% - 4.125vw);
        padding: 0 2.0625vw 9.375vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu--contents {
        height: calc(100% - 66px);
        padding: 0 33px 150px
    }
}

.sort-menu--contents-subtit {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    line-height: 1;
    text-align: center;
    margin: 5.0666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .sort-menu--contents-subtit {
        font-size: 1vw;
        margin: 2vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu--contents-subtit {
        font-size: 16px;
        margin: 32px 0 0
    }
}

.sort-menu--contents-list {
    display: flex;
    flex-wrap: wrap
}

.sort-menu--contents-list__item {
    background-color: #fff;
    border-radius: 3.3333333333vw;
    height: 6.6666666667vw;
    font-size: 2.6666666667vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    text-align: center;
    display: block;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .sort-menu--contents-list__item {
        font-size: .75vw;
        height: 2vw;
        margin: 1.0625vw 0 0;
        transition: .2s
    }

    .sort-menu--contents-list__item:hover {
        background-color: #446;
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu--contents-list__item {
        font-size: 12px;
        height: 32px;
        margin: 17px 0 0
    }
}

.sort-menu--contents-list__item.is-active {
    background-color: #446;
    color: #0cb;
    pointer-events: none
}

.sort-menu--contents-list.col-2 .sort-menu--contents-list__item {
    flex-basis: 44.2666666667vw
}

.sort-menu--contents-list.col-2 .sort-menu--contents-list__item:nth-child(even) {
    margin: 3.3333333333vw 0 0 3.4666666667vw
}

@media only screen and (min-width:767px) {
    .sort-menu--contents-list.col-2 .sort-menu--contents-list__item {
        flex-basis: 9.6875vw
    }

    .sort-menu--contents-list.col-2 .sort-menu--contents-list__item:nth-child(even) {
        margin: 1.0625vw 0 0 .9375vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu--contents-list.col-2 .sort-menu--contents-list__item {
        flex-basis: 155px
    }

    .sort-menu--contents-list.col-2 .sort-menu--contents-list__item:nth-child(even) {
        margin: 17px 0 0 15px
    }
}

.sort-menu--contents-list.col-3 .sort-menu--contents-list__item {
    flex-basis: 28.6666666667vw
}

@media only screen and (max-width:767px) {
    .sort-menu--contents-list.col-3 .sort-menu--contents-list__item:not(:nth-child(3n)) {
        margin: 3.3333333333vw 2.9333333333vw 0 0
    }
}

@media only screen and (min-width:767px) {
    .sort-menu--contents-list.col-3 .sort-menu--contents-list__item {
        flex-basis: 9.6875vw
    }

    .sort-menu--contents-list.col-3 .sort-menu--contents-list__item:nth-child(even) {
        margin: 1.0625vw 0 0 .9375vw
    }
}

@media only screen and (min-width:1400px) {
    .sort-menu--contents-list.col-3 .sort-menu--contents-list__item {
        flex-basis: 155px
    }

    .sort-menu--contents-list.col-3 .sort-menu--contents-list__item:nth-child(even) {
        margin: 17px 0 0 15px
    }
}

.news-list {
    width: 92vw;
    margin: 0 auto
}

@media only screen and (min-width:767px) {
    .news-list {
        width: 77.5vw;
        display: flex;
        flex-wrap: wrap
    }
}

@media only screen and (min-width:1400px) {
    .news-list {
        width: 1240px
    }
}

.news-list--item {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    background: #fff;
    overflow: hidden
}

@media only screen and (max-width:767px) {
    .news-list--item {
        margin: 4vw 0 0
    }
}

@media only screen and (min-width:767px) {
    .news-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .3125vw;
        width: 23.25vw;
        margin: 1.25vw;
        transition: .2s
    }

    .news-list--item:hover {
        box-shadow: none
    }

    .news-list--item:hover .news-list--item-data__tit {
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 5px;
        width: 372px;
        margin: 20px
    }
}

.news-list--item-heading {
    color: #fff;
    height: 5.3333333333vw;
    display: flex;
    align-items: center
}

@media only screen and (min-width:767px) {
    .news-list--item-heading {
        height: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item-heading {
        height: 32px
    }
}

.news-list--item-heading__date {
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .8) 100%);
    width: 46vw;
    height: 100%;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 2.6666666667vw;
    letter-spacing: .1em;
    padding: 0 0 0 3.0666666667vw;
    display: flex;
    align-items: center
}

@media only screen and (min-width:767px) {
    .news-list--item-heading__date {
        width: 10.8125vw;
        font-size: .875vw;
        padding: 0 0 0 1vw
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item-heading__date {
        width: 173px;
        font-size: 14px;
        padding: 0 0 0 16px
    }
}

.news-list--item-heading__cat {
    width: calc(100% - 46vw);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .news-list--item-heading__cat {
        width: calc(100% - 10.8125vw)
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item-heading__cat {
        width: calc(100% - 173px)
    }
}

.news-list--item-heading__cat:before {
    display: block;
    content: "";
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 2.6666666667vw;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .news-list--item-heading__cat:before {
        font-size: .875vw
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item-heading__cat:before {
        font-size: 14px
    }
}

.news-list--item-heading__cat[data-category=message] {
    background: linear-gradient(90deg, #01cc96 0, rgba(1, 204, 150, .8) 100%)
}

.news-list--item-heading__cat[data-category=message]::before {
    content: "プロジェクトメッセージ"
}

.news-list--item-heading__cat[data-category=update] {
    background: linear-gradient(90deg, #ff9503 0, rgba(255, 149, 3, .8) 100%)
}

.news-list--item-heading__cat[data-category=update]::before {
    content: "アップデート"
}

.news-list--item-heading__cat[data-category=important] {
    background: linear-gradient(90deg, #ff5fb4 0, rgba(255, 95, 180, .8) 100%)
}

.news-list--item-heading__cat[data-category=important]::before {
    content: "重要"
}

.news-list--item-heading__cat[data-category=campaign] {
    background: linear-gradient(90deg, #018cff 0, rgba(1, 140, 255, .8) 100%)
}

.news-list--item-heading__cat[data-category=campaign]::before {
    content: "キャンペーン"
}

.news-list--item-heading__cat[data-category=announce] {
    background: linear-gradient(90deg, #aa5fff 0, rgba(170, 95, 255, .8) 100%)
}

.news-list--item-heading__cat[data-category=announce]::before {
    content: "募集・結果発表"
}

.news-list--item-heading__cat[data-category=other] {
    background: linear-gradient(90deg, #859099 0, rgba(133, 144, 153, .8) 100%)
}

.news-list--item-heading__cat[data-category=other]::before {
    content: "その他"
}

@media only screen and (max-width:767px) {
    .news-list--item-data {
        min-height: 25.8666666667vw;
        display: flex;
        align-items: center
    }
}

.news-list--item-data__thumb {
    background-repeat: repeat-y;
    background-size: cover;
    background-position: 0 0;
    background-color: #ebebf2;
    width: 46vw;
    min-height: 25.8666666667vw;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .news-list--item-data__thumb {
        width: 100%;
        min-height: 13.125vw
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item-data__thumb {
        min-height: 210px
    }
}

.news-list--item-data__tit {
    width: 46vw;
    padding: 2.6666666667vw 4vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 3.2vw;
    letter-spacing: .05em;
    line-height: 1.5
}

@media only screen and (min-width:767px) {
    .news-list--item-data__tit {
        width: 100%;
        font-size: 1vw;
        padding: 1.25vw 2vw 1.375vw;
        transition: .3s
    }
}

@media only screen and (min-width:1400px) {
    .news-list--item-data__tit {
        font-size: 16px;
        padding: 20px 32px 22px
    }
}

.news-archive {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    background: #fff;
    width: 92vw;
    margin: 0 auto;
    overflow: hidden;
    display: block
}

@media only screen and (min-width:767px) {
    .news-archive {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .3125vw;
        width: 62.5vw;
        margin: 2.5vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .news-archive {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 5px;
        width: 1000px;
        margin: 40px auto 0
    }
}

.news-archive--heading {
    color: #fff;
    height: 6.9333333333vw;
    display: flex;
    align-items: center
}

@media only screen and (min-width:767px) {
    .news-archive--heading {
        height: 2.625vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--heading {
        height: 42px
    }
}

.news-archive--heading-date {
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .8) 100%);
    width: 26.6666666667vw;
    height: 100%;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .news-archive--heading-date {
        width: 11vw;
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--heading-date {
        width: 176px;
        font-size: 16px
    }
}

.news-archive--heading-cat {
    width: calc(100% - 26.6666666667vw);
    height: 100%;
    padding: 0 0 0 4vw;
    display: flex;
    align-items: center
}

@media only screen and (min-width:767px) {
    .news-archive--heading-cat {
        width: calc(100% - 11vw);
        padding: 0 0 0 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--heading-cat {
        width: calc(100% - 176px);
        padding: 0 0 0 40px
    }
}

.news-archive--heading-cat:before {
    display: block;
    content: "";
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .news-archive--heading-cat:before {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--heading-cat:before {
        font-size: 16px
    }
}

.news-archive--heading-cat[data-category=message] {
    background: linear-gradient(90deg, #01cc96 0, rgba(1, 204, 150, .8) 100%)
}

.news-archive--heading-cat[data-category=message]::before {
    content: "プロジェクトメッセージ"
}

.news-archive--heading-cat[data-category=update] {
    background: linear-gradient(90deg, #ff9503 0, rgba(255, 149, 3, .8) 100%)
}

.news-archive--heading-cat[data-category=update]::before {
    content: "アップデート"
}

.news-archive--heading-cat[data-category=important] {
    background: linear-gradient(90deg, #ff5fb4 0, rgba(255, 95, 180, .8) 100%)
}

.news-archive--heading-cat[data-category=important]::before {
    content: "重要"
}

.news-archive--heading-cat[data-category=campaign] {
    background: linear-gradient(90deg, #018cff 0, rgba(1, 140, 255, .8) 100%)
}

.news-archive--heading-cat[data-category=campaign]::before {
    content: "キャンペーン"
}

.news-archive--heading-cat[data-category=announce] {
    background: linear-gradient(90deg, #aa5fff 0, rgba(170, 95, 255, .8) 100%)
}

.news-archive--heading-cat[data-category=announce]::before {
    content: "募集・結果発表"
}

.news-archive--heading-cat[data-category=other] {
    background: linear-gradient(90deg, #859099 0, rgba(133, 144, 153, .8) 100%)
}

.news-archive--heading-cat[data-category=other]::before {
    content: "その他"
}

.news-archive--contents {
    padding: 7.3333333333vw 4vw 8vw
}

@media only screen and (min-width:767px) {
    .news-archive--contents {
        padding: 3.4375vw 2.5vw 3.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents {
        padding: 55px 40px 55px
    }
}

.news-archive--contents-tit {
    border-bottom: 1px solid #446;
    padding: 0 0 3.6vw
}

@media only screen and (min-width:767px) {
    .news-archive--contents-tit {
        padding: 0 0 .75vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-tit {
        padding: 0 0 12px
    }
}

.news-archive--contents-tit span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw;
    line-height: 1.65
}

@media only screen and (min-width:767px) {
    .news-archive--contents-tit span {
        font-size: 1.625vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-tit span {
        font-size: 26px
    }
}

.news-archive--contents-img {
    padding: 0 1.3333333333vw;
    margin: 8.6666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .news-archive--contents-img {
        text-align: center;
        padding: 0;
        margin: 4.0625vw auto 0
    }

    .news-archive--contents-img img {
        width: auto;
        max-width: 57.5vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-img {
        margin: 65px auto 0
    }

    .news-archive--contents-img img {
        max-width: 920px
    }
}

.news-archive--contents-subtit {
    border-radius: .6666666667vw;
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .8) 100%);
    width: 81.3333333333vw;
    padding: 2vw 2.6666666667vw 1.6vw;
    margin: 8.6666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .news-archive--contents-subtit {
        border-radius: .3125vw;
        width: 100%;
        padding: .9375vw 1.25vw .75vw;
        margin: 4.0625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-subtit {
        border-radius: 5px;
        padding: 15px 20px 12px;
        margin: 65px auto 0
    }
}

.news-archive--contents-subtit span {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    color: #fff;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .news-archive--contents-subtit span {
        font-size: 1.5vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-subtit span {
        font-size: 24px
    }
}

.news-archive--contents-emtit {
    padding: 0 1.3333333333vw;
    margin: 5.3333333333vw auto 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .news-archive--contents-emtit {
        padding: 0;
        margin: 1.875vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-emtit {
        margin: 30px auto 0
    }
}

.news-archive--contents-emtit:before {
    display: block;
    content: "";
    background: url(../data/webp/icon/icon_triangle.png.webp) no-repeat 0 0/contain;
    width: 2.9333333333vw;
    height: 3.4666666667vw;
    position: absolute;
    top: .2666666667vw;
    left: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .news-archive--contents-emtit:before {
        width: 1.0625vw;
        height: 1.125vw;
        top: 0;
        left: 0
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-emtit:before {
        width: 17px;
        height: 18px
    }
}

.news-archive--contents-emtit span {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 3.7333333333vw;
    display: inline-block;
    margin: 0 0 0 4.6666666667vw
}

@media only screen and (min-width:767px) {
    .news-archive--contents-emtit span {
        font-size: 1.125vw;
        margin: 0 0 0 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-emtit span {
        font-size: 18px;
        margin: 0 0 0 30px
    }
}

.news-archive--contents-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 2;
    padding: 0 1.3333333333vw;
    margin: 4vw auto 0
}

@media only screen and (min-width:767px) {
    .news-archive--contents-text {
        font-size: 1vw;
        line-height: 1.85;
        padding: 0;
        margin: 1.5625vw 0 -.625vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents-text {
        font-size: 16px;
        margin: 25px 0 -10px
    }
}

.news-archive--contents-text__link {
    display: block
}

.news-archive--contents-text a {
    color: #f7a;
    display: inline;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .news-archive--contents-text a {
        background-image: linear-gradient(90deg, #f7a, #f7a);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 1px;
        transition: background-size .2s
    }

    .news-archive--contents-text a:hover {
        background-size: 100% 0
    }
}

@media only screen and (min-width:767px) {
    .news-archive--contents .news-archive--contents-emtit+.news-archive--contents-text {
        margin: .9375vw 0 -.625vw
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents .news-archive--contents-emtit+.news-archive--contents-text {
        margin: 15px 0 -10px
    }
}

@media only screen and (min-width:767px) {
    .news-archive--contents .news-archive--contents-text+.news-archive--contents-subtit {
        margin: 3.4375vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .news-archive--contents .news-archive--contents-text+.news-archive--contents-subtit {
        margin: 55px auto 0
    }
}

.intro-block {
    padding: 0 0 8.6666666667vw
}

@media only screen and (min-width:767px) {
    .intro-block {
        padding: 0 0 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .intro-block {
        padding: 0 0 65px
    }
}

.intro-block--read1 {
    padding: 0 4vw;
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--read1 {
        padding: 0;
        margin: 4.0625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--read1 {
        margin: 65px 0 0
    }
}

.intro-block--inline1 {
    padding: 0 4vw;
    margin: 7.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--inline1 {
        padding: 0;
        margin: 3.4375vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--inline1 {
        margin: 55px 0 0
    }
}

.intro-block--img1 {
    margin: 7.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--img1 {
        margin: 3.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--img1 {
        margin: 55px 0 0
    }
}

.intro-block--inline2 {
    padding: 0 4vw;
    margin: 7.6vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--inline2 {
        padding: 0;
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--inline2 {
        margin: 60px 0 0
    }
}

.intro-block--inline3 {
    padding: 0 4vw;
    margin: 7.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--inline3 {
        padding: 0;
        margin: 3.4375vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--inline3 {
        margin: 55px 0 0
    }
}

.intro-block--inline4 {
    padding: 0 4vw;
    margin: 7.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--inline4 {
        padding: 0;
        margin: 2.1875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--inline4 {
        margin: 35px 0 0
    }
}

.intro-block--inline5 {
    padding: 0 4vw;
    margin: 6vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--inline5 {
        padding: 0;
        margin: 4.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--inline5 {
        margin: 68px 0 0
    }
}

.intro-block--img2 {
    margin: 7.6vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--img2 {
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--img2 {
        margin: 60px 0 0
    }
}

.intro-block--read2 {
    padding: 0 4vw;
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .intro-block--read2 {
        padding: 0;
        margin: 4.0625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .intro-block--read2 {
        margin: 65px 0 0
    }
}

.keyword-block {
    position: relative
}

.keyword-block--tit {
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .8) 100%);
    border-radius: .5333333333vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 6.4vw;
    color: #fff;
    letter-spacing: .2em;
    padding: .2666666667vw .6666666667vw .6666666667vw 1.7333333333vw;
    display: inline-block;
    position: relative
}

@media only screen and (min-width:767px) {
    .keyword-block--tit {
        border-radius: .3125vw;
        font-size: 3vw;
        padding: .3125vw .875vw .625vw 1.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--tit {
        border-radius: 5px;
        font-size: 48px;
        padding: 5px 14px 10px 23px
    }
}

.keyword-block--tit span {
    color: #f7a
}

.keyword-block--num {
    width: 14.6666666667vw;
    height: 19.3333333333vw;
    position: absolute
}

@media only screen and (min-width:767px) {
    .keyword-block--num {
        width: 9.375vw;
        height: 12.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--num {
        width: 150px;
        height: 195px
    }
}

.keyword-block--text {
    background: rgba(238, 238, 244, .8);
    padding: 8.6666666667vw 4vw 44vw;
    margin: -4vw 0 0
}

@media only screen and (min-width:767px) {
    .keyword-block--text {
        border-radius: .3125vw;
        padding: 3.75vw 2.1875vw 13.75vw;
        margin: -1.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--text {
        border-radius: 5px;
        padding: 60px 35px 220px;
        margin: -30px 0 0
    }
}

.keyword-block--text p {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 3.2vw;
    line-height: 2
}

@media only screen and (min-width:767px) {
    .keyword-block--text p {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--text p {
        font-size: 16px
    }
}

.keyword-block--slide {
    width: 84vw;
    height: 50.6666666667vw;
    padding: 0 0 6vw;
    margin: -40vw auto 6vw;
    box-sizing: content-box;
    position: relative;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .keyword-block--slide {
        width: 40vw;
        height: 24.125vw;
        padding: 0 0 2vw;
        margin: -18.75vw 0 0 29.0625vw;
        order: 2
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--slide {
        width: 640px;
        height: 386px;
        padding: 0 0 32px;
        margin: -300px 0 0 465px
    }
}

.keyword-block--slide-item {
    border-radius: 1.0666666667vw;
    height: 50.6666666667vw !important;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:767px) {
    .keyword-block--slide-item {
        border-radius: .625vw;
        height: 24.125vw !important
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--slide-item {
        border-radius: 10px;
        height: 386px !important
    }
}

.keyword-block--slide-item img {
    border-radius: 1.0666666667vw;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: none;
    height: 100%;
    max-height: 100%
}

@media only screen and (min-width:767px) {
    .keyword-block--slide-item img {
        border-radius: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--slide-item img {
        border-radius: 10px
    }
}

.keyword-block--slide .swiper-button-next,
.keyword-block--slide .swiper-button-prev {
    display: none
}

@media only screen and (min-width:767px) {

    .keyword-block--slide .swiper-button-next,
    .keyword-block--slide .swiper-button-prev {
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1vw 1.5vw;
        width: 3vw;
        height: 3vw;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        top: calc(50% - .625vw);
        cursor: pointer;
        pointer-events: auto;
        z-index: 2;
        transition: .2s;
        display: block
    }
}

@media only screen and (min-width:767px) and (min-width:767px) {

    .keyword-block--slide .swiper-button-next:hover,
    .keyword-block--slide .swiper-button-prev:hover {
        box-shadow: none;
        background-color: #446
    }
}

@media only screen and (min-width:1400px) {

    .keyword-block--slide .swiper-button-next,
    .keyword-block--slide .swiper-button-prev {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 16px 24px;
        width: 48px;
        height: 48px;
        top: calc(50% - 10px)
    }
}

@media only screen and (min-width:767px) {
    .keyword-block--slide .swiper-button-prev {
        background-image: url(../data/webp/icon/arw_prev.png.webp);
        left: -1.5vw;
        right: auto
    }

    .keyword-block--slide .swiper-button-prev:hover {
        background-image: url(../data/webp/icon/arw_prev_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--slide .swiper-button-prev {
        left: -24px
    }
}

@media only screen and (min-width:767px) {
    .keyword-block--slide .swiper-button-next {
        background-image: url(../data/webp/icon/arw_next.png.webp);
        right: -1.5vw;
        left: auto
    }

    .keyword-block--slide .swiper-button-next:hover {
        background-image: url(../data/webp/icon/arw_next_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--slide .swiper-button-next {
        right: -24px
    }
}

.keyword-block--slide .swiper-pagination-bullets {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translate3d(0, 0, 0)
}

.keyword-block--slide .swiper-pagination-bullet {
    background-color: #454567;
    border-radius: 50%;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin: 0 1.6vw !important;
    opacity: .2 !important;
    transition: .3s
}

@media only screen and (min-width:767px) {
    .keyword-block--slide .swiper-pagination-bullet {
        width: .625vw;
        height: .625vw;
        margin: 0 .5vw !important
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--slide .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 8px !important
    }
}

.keyword-block--slide .swiper-pagination-bullet-active {
    opacity: 1 !important
}

.keyword-block--thumb {
    border-radius: 1.0666666667vw;
    width: 84vw;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .keyword-block--thumb {
        border-radius: .625vw;
        width: 40vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block--thumb {
        border-radius: 10px;
        width: 640px
    }
}

.keyword-block.block-1 {
    padding: 8.6666666667vw 0 10vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-1 {
        padding: 4.0625vw 1.5625vw 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-1 {
        adding: 65px 25px 100px
    }
}

.keyword-block.block-1 .keyword-block--tit {
    margin: 0 0 0 4vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-1 .keyword-block--tit {
        margin: 0 0 0 2.375vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-1 .keyword-block--tit {
        margin: 0 0 0 38px
    }
}

.keyword-block.block-1 .keyword-block--num {
    top: 2vw;
    right: 6vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-1 .keyword-block--num {
        top: 21.5625vw;
        right: 46.875vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-1 .keyword-block--num {
        top: 345px;
        right: 750px
    }
}

.keyword-block.block-2 {
    padding: 0
}

@media only screen and (min-width:767px) {
    .keyword-block.block-2 {
        padding: 0 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-2 {
        padding: 0 25px
    }
}

.keyword-block.block-2 .keyword-block--tit {
    margin: 0 0 0 39.7333333333vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-2 .keyword-block--tit {
        margin: 0 0 0 45.625vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-2 .keyword-block--tit {
        margin: 0 0 0 730px
    }
}

.keyword-block.block-2 .keyword-block--num {
    top: -7.3333333333vw;
    left: 6vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-2 .keyword-block--num {
        top: 17.1875vw;
        left: 47.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-2 .keyword-block--num {
        top: 275px;
        left: 765px
    }
}

.keyword-block.block-2 .keyword-block--text {
    text-align: end
}

@media only screen and (min-width:767px) {
    .keyword-block.block-2 .keyword-block--text {
        padding: 3.75vw 2.1875vw 11.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-2 .keyword-block--text {
        padding: 60px 35px 185px
    }
}

.keyword-block.block-2 .keyword-block--thumb {
    margin: -38.6666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .keyword-block.block-2 .keyword-block--thumb {
        margin: -20vw 0 0 2.375vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-2 .keyword-block--thumb {
        margin: -320px 0 0 38px
    }
}

.keyword-block.block-3 {
    padding: 11.3333333333vw 0 8vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-3 {
        padding: 4.375vw 1.5625vw 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-3 {
        padding: 70px 25px 65px
    }
}

.keyword-block.block-3 .keyword-block--tit {
    margin: 0 0 0 4vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-3 .keyword-block--tit {
        margin: 0 0 0 2.375vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-3 .keyword-block--tit {
        margin: 0 0 0 38px
    }
}

.keyword-block.block-3 .keyword-block--num {
    top: 4vw;
    right: 6vw
}

@media only screen and (min-width:767px) {
    .keyword-block.block-3 .keyword-block--num {
        top: 21.875vw;
        right: 46.875vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-3 .keyword-block--num {
        top: 350px;
        right: 750px
    }
}

@media only screen and (min-width:767px) {
    .keyword-block.block-3 .keyword-block--text {
        padding: 3.75vw 2.1875vw 9.375vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-3 .keyword-block--text {
        padding: 60px 35px 150px
    }
}

.keyword-block.block-3 .keyword-block--thumb {
    margin: -36vw auto 0
}

@media only screen and (min-width:767px) {
    .keyword-block.block-3 .keyword-block--thumb {
        margin: -18.75vw 0 0 29.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .keyword-block.block-3 .keyword-block--thumb {
        margin: -300px 0 0 465px
    }
}

.system-block--slide {
    width: 84vw;
    height: 47.7333333333vw;
    padding: 0 0 6vw;
    margin: 1.3333333333vw auto 3.7333333333vw;
    box-sizing: content-box;
    position: relative;
    z-index: 2
}

@media only screen and (min-width:767px) {
    .system-block--slide {
        width: 56.25vw;
        height: 31.625vw;
        padding: 0 0 2.125vw;
        margin: .625vw auto 0;
        order: 2
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide {
        width: 900px;
        height: 506px;
        padding: 0 0 34px;
        margin: 10px auto 0 px
    }
}

.system-block--slide-list {
    border-radius: 1.0666666667vw;
    box-shadow: 1.3333333333vw 1.3333333333vw 0 0 rgba(68, 68, 102, .2)
}

@media only screen and (min-width:767px) {
    .system-block--slide-list {
        border-radius: .5vw;
        box-shadow: .5vw .5vw 0 0 rgba(68, 68, 102, .2)
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide-list {
        border-radius: 8px;
        box-shadow: 8px 8px 0 0 rgba(68, 68, 102, .2)
    }
}

.system-block--slide-item {
    border-radius: 1.0666666667vw;
    height: 47.3333333333vw !important;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width:767px) {
    .system-block--slide-item {
        border-radius: .625vw;
        height: 31.625vw !important
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide-item {
        border-radius: 10px;
        height: 506px !important
    }
}

.system-block--slide-item img {
    border-radius: 1.0666666667vw;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: none;
    height: 100%;
    max-height: 100%
}

@media only screen and (min-width:767px) {
    .system-block--slide-item img {
        border-radius: .625vw
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide-item img {
        border-radius: 10px
    }
}

.system-block--slide .swiper-button-next,
.system-block--slide .swiper-button-prev {
    display: none
}

@media only screen and (min-width:767px) {

    .system-block--slide .swiper-button-next,
    .system-block--slide .swiper-button-prev {
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        background-size: 1vw 1.5vw;
        width: 3vw;
        height: 3vw;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        top: calc(50% - .625vw);
        cursor: pointer;
        pointer-events: auto;
        z-index: 2;
        transition: .2s;
        display: block
    }
}

@media only screen and (min-width:767px) and (min-width:767px) {

    .system-block--slide .swiper-button-next:hover,
    .system-block--slide .swiper-button-prev:hover {
        box-shadow: none;
        background-color: #446
    }
}

@media only screen and (min-width:1400px) {

    .system-block--slide .swiper-button-next,
    .system-block--slide .swiper-button-prev {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        background-size: 16px 24px;
        width: 48px;
        height: 48px;
        top: calc(50% - 10px)
    }
}

@media only screen and (min-width:767px) {
    .system-block--slide .swiper-button-prev {
        background-image: url(../data/webp/icon/arw_prev.png.webp);
        left: -4.875vw;
        right: auto
    }

    .system-block--slide .swiper-button-prev:hover {
        background-image: url(../data/webp/icon/arw_prev_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide .swiper-button-prev {
        left: -78px
    }
}

@media only screen and (min-width:767px) {
    .system-block--slide .swiper-button-next {
        background-image: url(../data/webp/icon/arw_next.png.webp);
        right: -4.875vw;
        left: auto
    }

    .system-block--slide .swiper-button-next:hover {
        background-image: url(../data/webp/icon/arw_next_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide .swiper-button-next {
        right: -78px
    }
}

.system-block--slide .swiper-pagination-bullets {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translate3d(0, 0, 0);
    width: 100%
}

.system-block--slide .swiper-pagination-bullet {
    background-color: #454567;
    border-radius: 50%;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin: 0 1.6vw !important;
    opacity: .2 !important;
    transition: .3s
}

@media only screen and (min-width:767px) {
    .system-block--slide .swiper-pagination-bullet {
        width: .625vw;
        height: .625vw;
        margin: 0 .5vw !important
    }
}

@media only screen and (min-width:1400px) {
    .system-block--slide .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 8px !important
    }
}

.system-block--slide .swiper-pagination-bullet-active {
    opacity: 1 !important
}

.anchor-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 2vw 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .anchor-list {
        padding: 0;
        margin: 0 0 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-list {
        margin: 0 0 65px
    }
}

.anchor-list--btn {
    border-radius: 5.3333333333vw;
    flex-basis: 44vw;
    height: 10.6666666667vw;
    margin: 0 2vw 2.6666666667vw;
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(68, 68, 102, .1);
    background-color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: .2s
}

@media only screen and (min-width:767px) {
    .anchor-list--btn {
        box-shadow: 0 .3125vw .625vw .25vw rgba(68, 68, 102, .1);
        font-size: 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-list--btn {
        box-shadow: 0 5px 10px 4px rgba(68, 68, 102, .1);
        font-size: 20px
    }
}

@media only screen and (min-width:767px) {
    .anchor-list--btn:hover {
        box-shadow: none;
        background-color: #446;
        color: #0cb
    }

    .anchor-list--btn:hover::before {
        background-image: url(../data/webp/icon/icon_anc_arw_hov.png.webp)
    }
}

.anchor-list--btn:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/icon/icon_anc_arw.png.webp);
    width: 2.6666666667vw;
    height: 1.3333333333vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.3333333333vw;
    transition: .2s
}

@media only screen and (min-width:767px) {
    .anchor-list--btn:before {
        width: 1.25vw;
        height: .625vw;
        bottom: .4375vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-list--btn:before {
        width: 20px;
        height: 10px;
        bottom: 7px
    }
}

@media only screen and (min-width:767px) {
    .anchor-list--btn {
        border-radius: 2.25vw;
        flex-basis: 17.625vw;
        height: 4.5vw;
        margin: 0 .8125vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-list--btn {
        border-radius: 36px;
        flex-basis: 282px;
        height: 72px;
        margin: 0 13px
    }
}

@media only screen and (min-width:767px) {
    .anchor-list.long {
        margin: 0 0 -4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-list.long {
        margin: 0 0 -65px
    }
}

.anchor-list.long .anchor-list--btn {
    flex-basis: 64vw
}

@media only screen and (max-width:767px) {
    .anchor-list.long .anchor-list--btn {
        margin: 0 2vw 2.6666666667vw
    }
}

@media only screen and (min-width:767px) {
    .anchor-list.long .anchor-list--btn {
        flex-basis: 22.5vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-list.long .anchor-list--btn {
        flex-basis: 360px
    }
}

.anchor-block {
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(68, 68, 102, .1);
    border-radius: 1.0666666667vw;
    background-color: #fff;
    width: 92vw;
    margin: 0 auto 8.6666666667vw;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .anchor-block {
        box-shadow: 0 .3125vw .625vw .25vw 0 rgba(68, 68, 102, .1);
        border-radius: .5vw;
        width: 62.5vw;
        margin: 0 auto -4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-block {
        box-shadow: 0 5px 10px 4px rgba(68, 68, 102, .1);
        border-radius: 8px;
        width: 1000px;
        margin: 0 auto -65px
    }
}

.anchor-block--tit {
    background-color: #fff;
    width: 100%;
    height: 12.2666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4vw;
    position: relative;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .anchor-block--tit {
        height: 3.875vw;
        font-size: 1.25vw;
        transition: .2s
    }

    .anchor-block--tit:hover {
        background-color: #446;
        color: #0cb
    }

    .anchor-block--tit:hover .anchor-block--tit-icon {
        background-image: url(../data/webp/icon/icon_anc_arw_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .anchor-block--tit {
        height: 62px;
        font-size: 20px
    }
}

.anchor-block--tit-icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/icon/icon_anc_arw.png.webp);
    width: 3.2vw;
    height: 1.6vw;
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%)
}

@media only screen and (min-width:767px) {
    .anchor-block--tit-icon {
        width: 1.0625vw;
        height: .5vw;
        right: 1.25vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .anchor-block--tit-icon {
        width: 17px;
        height: 8px;
        right: 20px
    }
}

.anchor-block--tit.is-open .anchor-block--tit-icon {
    transform: translateY(-50%) rotate(-180deg)
}

.anchor-block--inline {
    display: none
}

.anchor-block--inline-container {
    background-color: #ebebf2;
    padding: 0 5.3333333333vw 6vw;
    display: flex;
    flex-wrap: wrap
}

@media only screen and (min-width:767px) {
    .anchor-block--inline-container {
        padding: 0 3.4375vw 2.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-block--inline-container {
        padding: 0 55px 45px
    }
}

.anchor-block--inline-link {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    display: flex;
    align-items: center;
    margin: 6vw 1.3333333333vw 0
}

@media only screen and (min-width:767px) {
    .anchor-block--inline-link {
        flex-basis: 25%;
        font-size: 1vw;
        margin: 2.8125vw 0 0;
        transition: .2s
    }

    .anchor-block--inline-link:hover {
        color: #0cb
    }

    .anchor-block--inline-link:hover .anchor-block--inline-icon {
        background-image: url(../data/webp/icon/icon_anc_arw_s_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .anchor-block--inline-link {
        font-size: 16px;
        margin: 45px 0 0
    }
}

.anchor-block--inline-icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/icon/icon_anc_arw_s.png.webp);
    width: 3.2vw;
    height: 2.1333333333vw;
    margin: .4vw 1.7333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-block--inline-icon {
        width: .9375vw;
        height: .625vw;
        margin: .125vw .8125vw 0 0;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .anchor-block--inline-icon {
        width: 15px;
        height: 10px;
        margin: 2px 13px 0 0
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec {
        margin: 4.0625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec {
        margin: 65px 0 0
    }
}

.anchor-sec:not(:first-of-type) {
    margin: 21.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec:not(:first-of-type) {
        margin: 7.5vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec:not(:first-of-type) {
        margin: 120px 0 0
    }
}

.anchor-sec--tit {
    background: linear-gradient(90deg, rgba(68, 68, 102, .8) 0, rgba(68, 68, 102, .6) 100%);
    width: 100%;
    padding: 5.6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .anchor-sec--tit {
        padding: 2.6875vw 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--tit {
        padding: 43px 100px
    }
}

.anchor-sec--tit.even {
    background: linear-gradient(90deg, rgba(68, 68, 102, .6) 0, rgba(68, 68, 102, .8) 100%)
}

.anchor-sec--tit-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center
}

@media only screen and (min-width:767px) {
    .anchor-sec--tit-text {
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--tit-text {
        font-size: 48px
    }
}

.anchor-sec--tit-text small {
    font-size: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--tit-text small {
        font-size: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--tit-text small {
        font-size: 40px
    }
}

.anchor-sec--contents {
    margin: 8.6666666667vw 0 0;
    position: relative
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents {
        margin: 4.0625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents {
        margin: 65px 0 0
    }
}

.anchor-sec--contents:before {
    display: block;
    content: "";
    background-color: rgba(255, 255, 255, .8);
    background-repeat: no-repeat;
    background-size: 58vw;
    width: 96vw;
    height: calc(100% - 8.6666666667vw);
    position: absolute;
    top: 8.6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents:before {
        background-size: 27.8125vw;
        width: calc(50vw + 41.5625vw);
        height: calc(100% - 4.0625vw);
        top: 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents:before {
        background-size: 445px;
        width: calc(50vw + 665px);
        height: calc(100% - 65px);
        top: 65px
    }
}

.anchor-sec--contents.contents-right {
    padding: 0 0 0 4vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-right {
        padding: 0
    }
}

.anchor-sec--contents.contents-right:before {
    background-image: url(../data/webp/system/bg_parts_right.png.webp);
    background-position: right bottom;
    border-radius: 1.0666666667vw 0 0 1.0666666667vw;
    right: 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-right:before {
        border-radius: .5vw 0 0 .5vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-right:before {
        border-radius: 8px 0 0 8px
    }
}

.anchor-sec--contents.contents-left {
    padding: 0 4vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-left {
        padding: 0
    }
}

.anchor-sec--contents.contents-left:before {
    background-image: url(../data/webp/system/bg_parts_left.png.webp);
    background-position: left bottom;
    border-radius: 0 1.0666666667vw 1.0666666667vw 0;
    left: 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-left:before {
        border-radius: 0 .5vw .5vw 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-left:before {
        border-radius: 0 8px 8px 0
    }
}

.anchor-sec--contents-container {
    position: relative
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-container {
        width: 75vw;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-container {
        width: 1200px
    }
}

.anchor-sec--contents-img,
.anchor-sec--contents-video {
    border-radius: 1.0666666667vw;
    box-shadow: 1.3333333333vw 1.3333333333vw 0 0 rgba(68, 68, 102, .2);
    width: 84vw;
    height: 47.2vw;
    position: relative;
    overflow: hidden
}

@media only screen and (min-width:767px) {

    .anchor-sec--contents-img,
    .anchor-sec--contents-video {
        border-radius: .5vw;
        box-shadow: .5vw .5vw 0 0 rgba(68, 68, 102, .2)
    }
}

@media only screen and (min-width:1400px) {

    .anchor-sec--contents-img,
    .anchor-sec--contents-video {
        border-radius: 8px;
        box-shadow: 8px 8px 0 0 rgba(68, 68, 102, .2)
    }
}

@media only screen and (min-width:767px) {

    .anchor-sec--contents-img,
    .anchor-sec--contents-video {
        width: 37.5vw;
        height: 21.0625vw
    }
}

@media only screen and (min-width:1400px) {

    .anchor-sec--contents-img,
    .anchor-sec--contents-video {
        width: 600px;
        height: 337px
    }
}

.anchor-sec--contents-img img,
.anchor-sec--contents-img video,
.anchor-sec--contents-video img,
.anchor-sec--contents-video video {
    width: auto;
    max-width: none;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
}

.anchor-sec--contents-yt {
    border-radius: 1.0666666667vw;
    box-shadow: 1.3333333333vw 1.3333333333vw 0 0 rgba(68, 68, 102, .2);
    width: 84vw;
    height: 47.2vw;
    position: relative;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-yt {
        border-radius: .5vw;
        box-shadow: .5vw .5vw 0 0 rgba(68, 68, 102, .2)
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-yt {
        border-radius: 8px;
        box-shadow: 8px 8px 0 0 rgba(68, 68, 102, .2)
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-yt {
        width: 37.5vw;
        height: 21.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-yt {
        width: 600px;
        height: 337px
    }
}

.anchor-sec--contents-yt iframe {
    width: 100% !important;
    height: 100% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important
}

.anchor-sec--contents-text {
    text-align: center;
    margin: 3.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-text {
        margin: 1.5625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-text {
        margin: 25px 0 0
    }
}

.anchor-sec--contents-text span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 4.8vw;
    line-height: 1.65;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-text span {
        font-size: 2vw;
        line-height: 1.45
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-text span {
        font-size: 32px
    }
}

.anchor-sec--contents-text span em {
    border-radius: .4vw;
    background-color: #7ed;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    padding: .1333333333vw .6666666667vw .6666666667vw;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-text span em {
        border-radius: .1875vw;
        padding: 0 .3125vw .25vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-text span em {
        border-radius: 3px;
        padding: 0 5px 4px
    }
}

.anchor-sec--contents-text span small {
    font-size: 2.6666666667vw;
    font-weight: 500;
    margin: 1.3333333333vw 0 0;
    display: block
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents-text span small {
        font-size: 1vw;
        margin: .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents-text span small {
        font-size: 16px;
        margin: 5px 0 0
    }
}

.anchor-sec--contents.contents-1-1 .anchor-sec--contents-container {
    padding: 0 5.3333333333vw 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-1-1 .anchor-sec--contents-container {
        padding: 0 0 3.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-1-1 .anchor-sec--contents-container {
        padding: 0 0 55px
    }
}

.anchor-sec--contents.contents-1-1 .anchor-sec--contents-img {
    height: 112vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-1-1 .anchor-sec--contents-img {
        width: 75vw;
        height: 26.25vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-1-1 .anchor-sec--contents-img {
        width: 1200px;
        height: 420px
    }
}

.anchor-sec--contents.contents-1-1 .anchor-sec--contents-text span em {
    margin: 0 .6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-1-1 .anchor-sec--contents-text span em {
        margin: 0 .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-1-1 .anchor-sec--contents-text span em {
        margin: 0 5px 0 0
    }
}

.anchor-sec--contents.contents-1-2 .anchor-sec--contents-container {
    padding: 0 0 8vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-container {
        padding: 0 0 4.0625vw;
        display: flex;
        align-items: center
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-container {
        padding: 0 0 65px
    }
}

.anchor-sec--contents.contents-1-2 .anchor-sec--contents-video {
    background-color: #557;
    margin: 0 5.3333333333vw 0 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-video {
        margin: 0 2vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-video {
        margin: 0 32px 0 0
    }
}

.anchor-sec--contents.contents-1-2 .anchor-sec--contents-text span em {
    margin: 0 .6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-text {
        text-align: left;
        padding: .9375vw 0 0
    }

    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-text span em {
        margin: 0 .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-text {
        padding: 15px 0 0
    }

    .anchor-sec--contents.contents-1-2 .anchor-sec--contents-text span em {
        margin: 0 5px 0 0
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-container {
    padding: 0 5.3333333333vw 6vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-container {
        padding: 0 0 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-container {
        padding: 0 0 65px
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-container__block:last-of-type {
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-container__block:last-of-type {
        margin: 0
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-flex {
        display: flex;
        justify-content: space-between
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-flex__block:last-of-type {
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-flex__block:last-of-type {
        margin: 0
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-img,
.anchor-sec--contents.contents-2 .anchor-sec--contents-yt {
    background-color: rgba(68, 68, 102, .2)
}

@media only screen and (min-width:767px) {

    .anchor-sec--contents.contents-2 .anchor-sec--contents-img,
    .anchor-sec--contents.contents-2 .anchor-sec--contents-yt {
        width: 36.5vw;
        height: 20.5625vw
    }
}

@media only screen and (min-width:1400px) {

    .anchor-sec--contents.contents-2 .anchor-sec--contents-img,
    .anchor-sec--contents.contents-2 .anchor-sec--contents-yt {
        width: 584px;
        height: 329px
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-text {
    margin: 4vw 0 7.4666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-text {
        flex-basis: 36.5vw;
        margin: 1.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-text {
        flex-basis: 584px;
        margin: 30px 0 0
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-text em {
    margin: 0 .6666666667vw
}

@media only screen and (max-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-text em:last-of-type {
        padding: .1333333333vw .6666666667vw .4vw
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-text em {
        margin: 0 .3125vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-text em {
        margin: 0 5px
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-artist {
    display: flex;
    flex-wrap: wrap;
    position: relative
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist {
        justify-content: center;
        margin: 2.5vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist {
        margin: 40px 0 0
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item {
    background-color: #ebebf2;
    border-radius: .4vw;
    flex-basis: 25.6vw;
    padding: 1.3333333333vw 1.3333333333vw 1.7333333333vw;
    margin: 0 1.3333333333vw 2.6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item {
        border-radius: .1875vw;
        flex-basis: 11vw;
        padding: .5vw;
        margin: 0 .625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item {
        border-radius: 3px;
        flex-basis: 176px;
        padding: 8px;
        margin: 0 10px
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-item {
    width: 22.9333333333vw;
    height: 22.9333333333vw;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-item {
        width: 10vw;
        height: 10vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-item {
        width: 160px;
        height: 160px
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-item img {
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-song {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: 3.2vw;
    line-height: 1;
    height: 2em;
    margin: 1.3333333333vw 0 1.0666666667vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-song {
        font-size: 1.25vw;
        margin: .3125vw 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-song {
        font-size: 20px;
        margin: 5px 0
    }
}

.anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-name {
    border-top: 1px solid #bcbcd0;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 2.6666666667vw;
    padding: .9333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-name {
        font-size: .875vw;
        padding: .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-2 .anchor-sec--contents-artist__item-name {
        font-size: 14px;
        padding: 5px 0 0
    }
}

.anchor-sec--contents.contents-3:before {
    display: block;
    content: ""
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3:before {
        height: calc(100% - 9.625vw);
        top: 9.625vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3:before {
        width: calc(100% - 154px);
        top: 154px
    }
}

.anchor-sec--contents.contents-3 .anchor-sec--contents-container {
    padding: 0 0 8vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-container {
        padding: 0 0 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-container {
        padding: 0 0 60px
    }
}

.anchor-sec--contents.contents-3 .anchor-sec--contents-yt {
    background-color: rgba(68, 68, 102, .2);
    margin: 0 4vw 0 8vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-yt {
        width: 56.25vw;
        height: 31.625vw;
        margin: 0 0 0 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-yt {
        width: 900px;
        height: 506px;
        margin: 0 0 0 60px
    }
}

.anchor-sec--contents.contents-3 .anchor-sec--contents-chara {
    width: 37.7333333333vw;
    height: 53.2vw;
    position: absolute;
    bottom: -2vw;
    right: -1.6vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-chara {
        width: 28.875vw;
        height: 18.125vw;
        bottom: 2.5vw;
        right: 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-chara {
        width: 462px;
        height: 290px;
        bottom: 40px
    }
}

.anchor-sec--contents.contents-3 .anchor-sec--contents-text {
    text-align: left;
    padding: 0 0 0 4.6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-text {
        padding: 0 0 0 3.75vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-text {
        padding: 0 0 0 60px
    }
}

.anchor-sec--contents.contents-3 .anchor-sec--contents-text span {
    font-size: 4.2666666667vw;
    letter-spacing: 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-text span {
        font-size: 2vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-text span {
        font-size: 32px
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-text em {
        margin: 0 .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-3 .anchor-sec--contents-text em {
        margin: 0 5px 0 0
    }
}

.anchor-sec--contents.contents-3 .anchor-sec--contents-text em b {
    font-style: normal;
    letter-spacing: -.5em
}

.anchor-sec--contents.contents-4-1 .anchor-sec--contents-container {
    padding: 0 2.2666666667vw 8.2666666667vw 4vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-container {
        padding: 0 0 3.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-container {
        padding: 0 0 55px
    }
}

.anchor-sec--contents.contents-4-1 .anchor-sec--contents-img {
    height: 112vw;
    margin: 0 auto 0 .6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-img {
        width: 75vw;
        height: 26.25vw;
        margin: 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-img {
        width: 1200px;
        height: 420px
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span {
        place-items: center
    }
}

.anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em {
    margin: 0 .6666666667vw 0 0
}

.anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em.pc-none {
    display: inline-block
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em.pc-none {
        display: none
    }
}

.anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em.sp-none {
    display: none
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em.sp-none {
        display: inline-block
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em {
        margin: 0 .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-1 .anchor-sec--contents-text span em {
        margin: 0 5px 0 0
    }
}

.anchor-sec--contents.contents-4-2:before {
    display: block;
    content: ""
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-2:before {
        height: calc(100% - 5.375vw);
        top: 5.375vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-2:before {
        height: calc(100% - 86px);
        top: 86px
    }
}

.anchor-sec--contents.contents-4-2 .anchor-sec--contents-container {
    padding: 0 5.3333333333vw 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-container {
        padding: 0 0 3.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-container {
        padding: 0 0 55px
    }
}

.anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span {
    line-height: 1.8
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span {
        line-height: 1.6
    }
}

.anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em {
    margin: 0 .6666666667vw 0 0
}

.anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em.pc-none {
    display: inline-block
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em.pc-none {
        display: none
    }
}

.anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em.sp-none {
    display: none
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em.sp-none {
        display: inline-block
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em {
        margin: 0 .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-2 .anchor-sec--contents-text span em {
        margin: 0 5px 0 0
    }
}

.anchor-sec--contents.contents-4-3:before {
    display: block;
    content: ""
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3:before {
        height: calc(100% - 5.1875vw);
        top: 5.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-3:before {
        height: calc(100% - 83px);
        top: 83px
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-container {
    padding: 0 2.2666666667vw 6.6666666667vw 4vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-container {
        padding: 0 0 3.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-container {
        padding: 0 0 55px
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-container__block:last-of-type {
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-container__block:last-of-type {
        margin: 0
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-flex {
        display: flex;
        justify-content: space-between
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-flex__block:last-of-type {
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-flex__block:last-of-type {
        margin: 0
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-img {
    background-color: rgba(68, 68, 102, .2);
    margin: 0 auto 0 .6666666667vw
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-img {
        width: 36.5vw;
        height: 20.5625vw;
        margin: 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-img {
        width: 584px;
        height: 329px
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-text {
    margin: 2.9333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text {
        flex-basis: 36.5vw;
        margin: 1.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text {
        flex-basis: 584px;
        margin: 30px 0 0
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em {
    margin: 0 .6666666667vw
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em.pc-none {
    display: inline-block
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em.pc-none {
        display: none
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em.sp-none {
    display: none
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em.sp-none {
        display: inline-block
    }
}

@media only screen and (max-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em:last-of-type {
        padding: .1333333333vw .6666666667vw .4vw
    }
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em {
        margin: 0 .3125vw
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text em {
        margin: 0 5px
    }
}

.anchor-sec--contents.contents-4-3 .anchor-sec--contents-text small {
    margin: .2666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text small {
        font-size: 1vw;
        margin: .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .anchor-sec--contents.contents-4-3 .anchor-sec--contents-text small {
        font-size: 16px;
        margin: 5px 0 0
    }
}

.music-sec:not(:first-of-type) {
    margin: 16vw 0 0
}

@media only screen and (min-width:767px) {
    .music-sec:not(:first-of-type) {
        margin: 6.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .music-sec:not(:first-of-type) {
        margin: 100px 0 0
    }
}

.music-sec--tit {
    background: linear-gradient(90deg, rgba(68, 68, 102, .8) 0, rgba(68, 68, 102, .6) 100%);
    width: 100%;
    padding: 5.6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .music-sec--tit {
        padding: 2.6875vw 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--tit {
        padding: 43px 100px
    }
}

.music-sec--tit.even {
    background: linear-gradient(90deg, rgba(68, 68, 102, .6) 0, rgba(68, 68, 102, .8) 100%)
}

.music-sec--tit-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center
}

@media only screen and (min-width:767px) {
    .music-sec--tit-text {
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--tit-text {
        font-size: 48px
    }
}

.music-sec--tit-text small {
    font-size: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .music-sec--tit-text small {
        font-size: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--tit-text small {
        font-size: 40px
    }
}

.music-sec--tit-text.long {
    font-size: 5vw
}

@media only screen and (min-width:767px) {
    .music-sec--tit-text.long {
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--tit-text.long {
        font-size: 48px
    }
}

.music-sec--read {
    text-align: center;
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .music-sec--read {
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--read {
        margin: 60px 0 0
    }
}

.music-sec--read span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 4.8vw;
    line-height: 1.65;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .music-sec--read span {
        font-size: 2vw;
        line-height: 1.45
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--read span {
        font-size: 32px
    }
}

.music-sec--read span em {
    border-radius: .4vw;
    background-color: #7ed;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    padding: .1333333333vw .6666666667vw .6666666667vw;
    margin: 0 .6666666667vw;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .music-sec--read span em {
        border-radius: .1875vw;
        padding: 0 .3125vw .25vw;
        margin: 0 .3125vw
    }
}

@media only screen and (min-width:1400px) {
    .music-sec--read span em {
        border-radius: 3px;
        padding: 0 5px 4px;
        margin: 0 5px
    }
}

.song-list {
    width: 69.3333333333vw;
    padding: 0 0 4.4vw;
    margin: 0 auto
}

@media only screen and (min-width:767px) {
    .song-list {
        width: 67.5vw;
        padding: 0 0 2.0625vw;
        margin: 1.25vw auto 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }
}

@media only screen and (min-width:1400px) {
    .song-list {
        width: 1080px;
        padding: 0 0 33px;
        margin: 20px auto 0
    }
}

.song-list--item {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: .6666666667vw;
    background: #fff;
    margin: 5.3333333333vw 0 0;
    display: none
}

@media only screen and (max-width:767px) {
    .song-list--item:first-child {
        margin: 8vw 0 0
    }
}

@media only screen and (min-width:767px) {
    .song-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .3125vw;
        width: 32.5vw;
        margin: 2.5vw 0 0;
        transition: .3s
    }

    .song-list--item:hover {
        box-shadow: none
    }

    .song-list--item:hover .song-list--name {
        color: #0cb
    }
}

@media only screen and (min-width:1400px) {
    .song-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 5px;
        width: 520px;
        margin: 40px 0 0
    }
}

.song-list--item a {
    display: block
}

.song-list--heading {
    border-radius: .6666666667vw .6666666667vw 0 0;
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .8) 100%);
    color: #fff;
    height: 8vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 2.6666666667vw;
    display: flex;
    justify-content: center;
    align-items: center
}

@media only screen and (min-width:767px) {
    .song-list--heading {
        border-radius: .3125vw .3125vw 0 0;
        height: 3.75vw;
        font-size: 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .song-list--heading {
        border-radius: 5px 5px 0 0;
        height: 60px;
        font-size: 20px
    }
}

.song-list--name {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw;
    letter-spacing: .06em;
    padding: 4vw 2.6666666667vw 4.2666666667vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

@media only screen and (min-width:767px) {
    .song-list--name {
        font-size: 2vw;
        padding: 1.875vw 1.25vw 2vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .song-list--name {
        font-size: 32px;
        padding: 30px 20px 32px
    }
}

.song-list--zoom {
    width: 8vw;
    height: 8vw;
    position: absolute;
    right: 1.3333333333vw;
    bottom: -4.4vw
}

@media only screen and (min-width:767px) {
    .song-list--zoom {
        width: 3.75vw;
        height: 3.75vw;
        right: .625vw;
        bottom: -2.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .song-list--zoom {
        width: 60px;
        height: 60px;
        right: 10px;
        bottom: -33px
    }
}

.song-list.all .song-list--item {
    display: block
}

.song-list.virtualsinger .song-list--item.virtualsinger {
    display: block
}

.song-list.leoneed .song-list--item.leoneed {
    display: block
}

.song-list.moremore .song-list--item.moremore {
    display: block
}

.song-list.vivid .song-list--item.vivid {
    display: block
}

.song-list.wonder .song-list--item.wonder {
    display: block
}

.song-list.nightcord .song-list--item.nightcord {
    display: block
}

.recording-list {
    padding: 0 4vw;
    margin: 2.6666666667vw auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media only screen and (min-width:767px) {
    .recording-list {
        width: 67.5vw;
        padding: 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .recording-list {
        width: 1080px
    }
}

.recording-list--item {
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    border-radius: 1.0666666667vw;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-image: url(../data/webp/music/bg_grad.png.webp);
    background-color: #fff;
    flex-basis: 44vw;
    height: 24.5333333333vw;
    overflow: hidden;
    padding: 3.3333333333vw 2.6666666667vw 2.6666666667vw 3.3333333333vw;
    margin: 4vw 0 0;
    display: none
}

@media only screen and (min-width:767px) {
    .recording-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .625vw;
        background-image: url(../data/webp/music/bg_grad_pc.png.webp);
        flex-basis: 32.5vw;
        height: 9.6875vw;
        padding: 1.75vw 1.875vw 1.875vw;
        margin: 2.5vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .recording-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 10px;
        flex-basis: 520px;
        height: 155px;
        padding: 30px 30px;
        margin: 40px 0 0
    }
}

.recording-list--title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 3.3333333333vw;
    margin: 0 0 2.2666666667vw
}

@media only screen and (min-width:767px) {
    .recording-list--title {
        font-size: 1.5vw;
        margin: 0 0 1.375vw
    }
}

@media only screen and (min-width:1400px) {
    .recording-list--title {
        font-size: 24px;
        margin: 0 0 22px
    }
}

.recording-list--create {
    font-size: 2.4vw;
    margin: .4vw 0 0;
    display: flex
}

@media only screen and (min-width:767px) {
    .recording-list--create {
        font-size: 1vw;
        margin: .3125vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .recording-list--create {
        font-size: 16px;
        margin: 5px 0 0
    }
}

.recording-list--create dt {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    opacity: .5;
    margin-right: 2vw
}

@media only screen and (min-width:767px) {
    .recording-list--create dt {
        margin-right: .9375vw
    }
}

@media only screen and (min-width:1400px) {
    .recording-list--create dt {
        margin-right: 15px
    }
}

.recording-list--create dd {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400
}

.recording-list--attention {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 2.1333333333vw;
    margin: 2.6666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .recording-list--attention {
        font-size: .75vw;
        text-align: right;
        margin: .3125vw 0 -1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .recording-list--attention {
        font-size: 12px;
        margin: 5px 0 -20px
    }
}

.recording-list--more {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 5.3333333333vw;
    text-align: center;
    line-height: 1;
    letter-spacing: .06em;
    margin: 8vw 0 0
}

@media only screen and (min-width:767px) {
    .recording-list--more {
        font-size: 2.5vw;
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .recording-list--more {
        font-size: 40px;
        margin: 60px 0 0
    }
}

.recording-list.all .recording-list--item {
    display: block
}

.recording-list.virtualsinger .recording-list--item.virtualsinger {
    display: block
}

.recording-list.leoneed .recording-list--item.leoneed {
    display: block
}

.recording-list.moremore .recording-list--item.moremore {
    display: block
}

.recording-list.vivid .recording-list--item.vivid {
    display: block
}

.recording-list.wonder .recording-list--item.wonder {
    display: block
}

.recording-list.nightcord .recording-list--item.nightcord {
    display: block
}

.note-list--item {
    border-radius: 1.0666666667vw;
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    background-color: #fff;
    width: 92vw;
    margin: 0 auto 8vw;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .note-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .5vw;
        width: 62.5vw;
        margin: 0 auto 2.5vw
    }
}

@media only screen and (min-width:767px) {
    .note-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 8px;
        width: 1000px;
        margin: 0 auto 40px
    }
}

.note-list--head {
    background: linear-gradient(90deg, #80ffec 0, #a6fff2 50%);
    height: 7.2vw;
    padding: 0 5.3333333333vw;
    position: relative;
    display: flex;
    align-items: center
}

@media only screen and (min-width:767px) {
    .note-list--head {
        height: 2.625vw;
        padding: 0 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--head {
        height: 42px;
        padding: 0 40px
    }
}

.note-list--head:before {
    display: block;
    content: "";
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    line-height: 1;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .note-list--head:before {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--head:before {
        font-size: 16px
    }
}

.note-list--item[data-cat=message] .note-list--head:before {
    content: "MESSAGE"
}

.note-list--item[data-cat=casual] .note-list--head:before {
    content: "CASUAL"
}

.note-list--item[data-status=done] .note-list--head-status {
    background-color: #ff619a;
    clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
    width: 35.3333333333vw;
    height: 7.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0
}

@media only screen and (min-width:767px) {
    .note-list--item[data-status=done] .note-list--head-status {
        clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
        width: 13.4375vw;
        height: 2.625vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--item[data-status=done] .note-list--head-status {
        width: 215px;
        height: 42px
    }
}

.note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text {
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 0 0 1.5em
}

.note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text:before {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/icon/icon_done.png.webp);
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    margin: .2666666667vw 0 0
}

@media only screen and (min-width:767px) {
    .note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text:before {
        width: 1.5vw;
        height: 1.5vw;
        margin: .125vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text:before {
        width: 24px;
        height: 24px;
        margin: 2px 0 0
    }
}

.note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text span {
    padding-left: .9333333333vw;
    position: relative;
    display: inline-block
}

@media only screen and (min-width:767px) {
    .note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text span {
        padding-left: .4375vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text span {
        padding-left: 7px
    }
}

.note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text span:before {
    display: block;
    content: "";
    content: "回答/解決済";
    display: inline-block;
    width: 100%;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: 3.0666666667vw;
    letter-spacing: .1em
}

@media only screen and (min-width:767px) {
    .note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text span:before {
        font-size: 1vw;
        line-height: 1.5
    }
}

@media only screen and (min-width:1400px) {
    .note-list--item[data-status=done] .note-list--head-status .note-list--head-status__text span:before {
        font-size: 16px
    }
}

.note-list--title {
    background: linear-gradient(90deg, #464668 0, rgba(70, 70, 104, .7) 100%);
    padding: 4vw 5.3333333333vw 5.3333333333vw;
    position: relative
}

@media only screen and (min-width:767px) {
    .note-list--title {
        padding: 1.875vw 2.5vw 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--title {
        padding: 30px 40px 20px
    }
}

.note-list--title-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw;
    color: #fff;
    line-height: 1.59375;
    letter-spacing: .06em
}

@media only screen and (min-width:767px) {
    .note-list--title-text {
        font-size: 1.5vw;
        line-height: 1.5833333333
    }
}

@media only screen and (min-width:1400px) {
    .note-list--title-text {
        font-size: 24px
    }
}

.note-list--title-content {
    display: flex;
    align-items: stretch
}

.note-list--title-date {
    margin: 2vw 0 0;
    display: flex;
    justify-content: end
}

@media only screen and (min-width:767px) {
    .note-list--title-date {
        margin: .625vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .note-list--title-date {
        margin: 10px 0 0
    }
}

.note-list--title-date__item {
    color: #fff;
    line-height: 1.25;
    padding-left: 2.6666666667vw
}

@media only screen and (min-width:767px) {
    .note-list--title-date__item {
        padding-left: 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--title-date__item {
        padding-left: 20px
    }
}

.note-list--title-date__item span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    display: inline-block;
    position: relative
}

@media only screen and (min-width:767px) {
    .note-list--title-date__item span {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--title-date__item span {
        font-size: 16px
    }
}

.note-list--title-date__item span:before {
    display: block;
    content: "";
    display: inline-block;
    border: .1333333333vw solid #fff;
    font-size: 2.6666666667vw;
    letter-spacing: .1em;
    padding: 0 .2666666667vw .2666666667vw .5333333333vw;
    margin-right: 1.3333333333vw
}

@media only screen and (min-width:767px) {
    .note-list--title-date__item span:before {
        border: 1px solid #fff;
        font-size: .875vw;
        padding: 0 .125vw .125vw .25vw;
        margin-right: .4375vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--title-date__item span:before {
        font-size: 14px;
        padding: 0 2px 2px 4px;
        margin-right: 7px
    }
}

.note-list--title-date__item span:empty:after,
.note-list--title-date__item span:empty:before {
    display: none !important
}

.note-list--title-date__item.publishe span:before {
    content: "掲載日"
}

.note-list--title-date__item.update:has(span:empty) {
    padding-left: 0
}

.note-list--title-date__item.update span:before {
    content: "更新日"
}

.note-list--contents {
    padding: 4vw 5.3333333333vw 8vw;
    transition: .3s
}

@media only screen and (min-width:767px) {
    .note-list--contents {
        padding: 1.875vw 2.5vw 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents {
        padding: 30px 40px 40px
    }
}

.note-list--contents-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 2;
    margin: 4vw 0 0
}

@media only screen and (min-width:767px) {
    .note-list--contents-text {
        font-size: 1vw;
        line-height: 1.75;
        margin: 2.1875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-text {
        font-size: 16px;
        margin: 35px 0 0
    }
}

.note-list--contents-text:first-child {
    margin: 0
}

.note-list--contents-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 4vw auto 0
}

@media only screen and (min-width:767px) {
    .note-list--contents-img {
        margin: 2.1875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-img {
        margin: 35px 0 0
    }
}

.note-list--contents-img:first-child {
    margin: 0 auto
}

.note-list--contents-link {
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(68, 68, 102, .1);
    background-color: #7ed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 4.6666666667vw;
    min-width: 40vw;
    padding: 2.6666666667vw 4vw 2.9333333333vw;
    margin: 4vw auto 0;
    display: table;
    text-align: center
}

@media only screen and (min-width:767px) {
    .note-list--contents-link {
        box-shadow: 0 .3125vw .625vw .25vw 0 rgba(68, 68, 102, .1);
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-link {
        box-shadow: 0 5px 10px 4px rgba(68, 68, 102, .1)
    }
}

@media only screen and (min-width:767px) {
    .note-list--contents-link:hover {
        box-shadow: none;
        background-color: #446
    }

    .note-list--contents-link:hover span {
        color: #0cb
    }
}

.note-list--contents-link span {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    font-size: 4vw;
    letter-spacing: .05em
}

@media only screen and (min-width:767px) {
    .note-list--contents-link span {
        font-size: 1.5vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-link span {
        font-size: 24px
    }
}

@media only screen and (min-width:767px) {
    .note-list--contents-link {
        border-radius: 1.4375vw;
        min-width: 15vw;
        padding: .8125vw 1.875vw .9375vw;
        margin: 2.5vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-link {
        border-radius: 23px;
        min-width: 240px;
        padding: 13px 30px 15px;
        margin: 40px auto 0
    }
}

.note-list--contents-link span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: 3.2vw;
    line-height: 1.2
}

@media only screen and (min-width:767px) {
    .note-list--contents-link span {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-link span {
        font-size: 16px
    }
}

.note-list--contents-acd {
    border-radius: 1.0666666667vw;
    background-color: #ebebf2;
    width: 100%;
    height: 9.8666666667vw;
    margin: 5.3333333333vw auto 0;
    pointer-events: auto;
    cursor: pointer;
    position: relative
}

@media only screen and (min-width:767px) {
    .note-list--contents-acd {
        border-radius: .5vw;
        height: 2.875vw;
        margin: 2.5vw auto 0;
        transition: .2s
    }

    .note-list--contents-acd:hover {
        background-color: #446
    }

    .note-list--contents-acd:hover:before {
        color: #0cb
    }

    .note-list--contents-acd:hover .note-list--contents-acd__icon {
        background-image: url(../data/webp/icon/icon_anc_arw_hov.png.webp)
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-acd {
        border-radius: 8px;
        height: 46px;
        margin: 40px auto 0;
        transition: .2s
    }
}

.note-list--contents-acd:before {
    display: block;
    content: "";
    content: "続きを読む";
    display: block;
    font-size: 3.2vw;
    letter-spacing: .05em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media only screen and (min-width:767px) {
    .note-list--contents-acd:before {
        font-size: 1vw;
        transition: .2s
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-acd:before {
        font-size: 16px
    }
}

.note-list--contents-acd__icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    background-image: url(../data/webp/icon/icon_anc_arw.png.webp);
    width: 3.2vw;
    height: 1.6vw;
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%)
}

@media only screen and (min-width:767px) {
    .note-list--contents-acd__icon {
        width: 1vw;
        height: .5vw;
        right: 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents-acd__icon {
        width: 16px;
        height: 8px;
        right: 20px
    }
}

.note-list--contents-acd.is-open:before {
    content: "閉じる"
}

.note-list--contents-acd.is-open .note-list--contents-acd__icon {
    transform: translateY(-50%) rotate(-180deg)
}

.note-list--contents.omit .note-list--contents-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

@media only screen and (min-width:767px) {
    .note-list--contents.omit .note-list--contents-text {
        -webkit-line-clamp: 2
    }
}

.note-list--contents.omit .note-list--contents-text:first-child {
    margin: 0 0 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .note-list--contents.omit .note-list--contents-text:first-child {
        margin: 0 0 1.25vw
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents.omit .note-list--contents-text:first-child {
        margin: 0 0 20px
    }
}

.note-list--contents.omit .note-list--contents-text:not(:first-child) {
    display: none
}

.note-list--contents.omit .note-list--contents-img {
    display: none
}

.note-list--contents.omit .note-list--contents-link {
    display: none
}

.note-list--contents.omit .note-list--contents-acd {
    margin: 2vw auto 0
}

@media only screen and (min-width:767px) {
    .note-list--contents.omit .note-list--contents-acd {
        margin: .625vw auto 0
    }
}

@media only screen and (min-width:1400px) {
    .note-list--contents.omit .note-list--contents-acd {
        margin: 10px auto 0
    }
}

.note-list .icon-loading {
    cursor: pointer;
    padding: 20px 0 100px
}

.note-list .icon-loading img {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: block;
    animation: rotate_anime .8s linear 0s infinite
}

@keyframes rotate_anime {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.tag-list--logo {
    position: relative;
    width: 100%;
    margin-top: 8vw;
    padding: 5.3333333333vw 4vw 3.3333333333vw;
    background-color: rgba(255, 255, 255, .8);
    filter: drop-shadow(0 1.3333333333vw 1.3333333333vw rgba(0, 0, 0, .1))
}

@media only screen and (min-width:767px) {
    .tag-list--logo {
        margin-top: 2.5vw;
        padding: .625vw 0;
        filter: drop-shadow(0 .625vw .625vw rgba(0, 0, 0, .1))
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo {
        margin-top: 40px;
        padding: 10px 0;
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .1))
    }
}

.tag-list--logo-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .tag-list--logo-list {
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center
    }
}

.tag-list--logo-item.js-current .tag-list--logo-link,
.tag-list--logo-item:hover .tag-list--logo-link {
    opacity: .3;
    pointer-events: none
}

@media only screen and (max-width:767px) {
    .tag-list--logo-item.all {
        border: 1px solid #d5dde5;
        border-radius: 5.3333333333vw;
        width: 100%;
        height: 10.6666666667vw;
        margin: 0 0 2vw;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.tag-list--logo-item.all .tag-list--logo-link {
    width: 100%;
    height: 10.6666666667vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.all .tag-list--logo-link {
        width: 7.5vw;
        height: 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.all .tag-list--logo-link {
        width: 120px;
        height: 100px
    }
}

.tag-list--logo-item.all img {
    width: 9.3333333333vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.all img {
        width: 4.375vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.all img {
        width: 70px
    }
}

.tag-list--logo-item.virtualsinger img {
    width: 19.0666666667vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.virtualsinger img {
        width: 7.3125vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.virtualsinger img {
        width: 117px
    }
}

.tag-list--logo-item.leoneed img {
    width: 23.4666666667vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.leoneed img {
        width: 9.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.leoneed img {
        width: 145px
    }
}

.tag-list--logo-item.moremore img {
    width: 22vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.moremore img {
        width: 8.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.moremore img {
        width: 135px
    }
}

.tag-list--logo-item.vivid img {
    width: 20.2666666667vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.vivid img {
        width: 7.8125vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.vivid img {
        width: 125px
    }
}

.tag-list--logo-item.wonder img {
    width: 26.9333333333vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.wonder img {
        width: 10.4375vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.wonder img {
        width: 167px
    }
}

.tag-list--logo-item.nightcord img {
    width: 24vw
}

@media only screen and (min-width:767px) {
    .tag-list--logo-item.nightcord img {
        width: 9.3125vw
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-item.nightcord img {
        width: 149px
    }
}

.tag-list--logo-link {
    width: 30.6666666667vw;
    height: 16vw;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    display: block;
    cursor: pointer;
    pointer-events: auto
}

@media only screen and (min-width:767px) {
    .tag-list--logo-link {
        transition: .2s all
    }

    .tag-list--logo-link:hover {
        opacity: .7
    }
}

@media only screen and (min-width:767px) {
    .tag-list--logo-link {
        width: 12.5vw;
        height: 6.25vw;
        transition: .3s
    }
}

@media only screen and (min-width:1400px) {
    .tag-list--logo-link {
        width: 200px;
        height: 100px
    }
}

.tag-list--logo-link img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.tab-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 2vw 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .tab-list {
        padding: 0;
        margin: 0 0 4.0625vw
    }
}

@media only screen and (min-width:1400px) {
    .tab-list {
        margin: 0 0 65px
    }
}

.tab-list--btn {
    border-radius: 4.6666666667vw;
    background-color: #fff;
    flex-basis: 40vw;
    height: 9.3333333333vw;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 3.2vw;
    margin: 0 2vw 2.6666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    position: relative
}

@media only screen and (min-width:767px) {
    .tab-list--btn {
        border-radius: 2.25vw;
        flex-basis: 15vw;
        height: 2.875vw;
        font-size: 1.25vw;
        margin: 0 .8125vw;
        transition: .3s all
    }

    .tab-list--btn:hover {
        background-color: #446;
        color: #fff
    }
}

@media only screen and (min-width:1400px) {
    .tab-list--btn {
        border-radius: 23px;
        flex-basis: 240px;
        height: 46px;
        font-size: 20px;
        margin: 0 13px
    }
}

.tab-list--btn.js-active {
    background-color: #446;
    color: #fff;
    pointer-events: none
}

.tab-list.dl .tab-list--btn {
    border-radius: 3.3333333333vw;
    height: 6.6666666667vw;
    margin: 0 2vw 4vw
}

@media only screen and (min-width:767px) {
    .tab-list.dl .tab-list--btn {
        border-radius: 2.25vw;
        flex-basis: 11.4375vw;
        height: 2.875vw;
        font-size: .875vw;
        margin: 0 .625vw
    }
}

@media only screen and (min-width:1400px) {
    .tab-list.dl .tab-list--btn {
        border-radius: 23px;
        flex-basis: 183px;
        height: 46px;
        font-size: 14px;
        margin: 0 10px
    }
}

.tab-contents--container {
    display: none;
    transition: .3s;
    opacity: 0
}

.tab-contents--container.js-show {
    display: block;
    opacity: 1
}

.tab-contents--tit {
    background: linear-gradient(90deg, rgba(68, 68, 102, .8) 0, rgba(68, 68, 102, .6) 100%);
    width: 100%;
    padding: 5.6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .tab-contents--tit {
        padding: 2.6875vw 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .tab-contents--tit {
        padding: 43px 100px
    }
}

.tab-contents--tit.even {
    background: linear-gradient(90deg, rgba(68, 68, 102, .6) 0, rgba(68, 68, 102, .8) 100%)
}

.tab-contents--tit-text {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 6.4vw;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center
}

@media only screen and (min-width:767px) {
    .tab-contents--tit-text {
        font-size: 3vw
    }
}

@media only screen and (min-width:1400px) {
    .tab-contents--tit-text {
        font-size: 48px
    }
}

.tab-contents--tit-text small {
    font-size: 5.3333333333vw
}

@media only screen and (min-width:767px) {
    .tab-contents--tit-text small {
        font-size: 2.5vw
    }
}

@media only screen and (min-width:1400px) {
    .tab-contents--tit-text small {
        font-size: 40px
    }
}

.faq-list--item {
    border-radius: 1.0666666667vw;
    box-shadow: 0 1.3333333333vw 1.0666666667vw 0 rgba(68, 68, 102, .1);
    background-color: #fff;
    width: 92vw;
    margin: 5.3333333333vw auto 0;
    overflow: hidden
}

@media only screen and (min-width:767px) {
    .faq-list--item {
        box-shadow: 0 .625vw .625vw 0 rgba(68, 68, 102, .1);
        border-radius: .5vw;
        width: 62.5vw;
        margin: 2.5vw auto 0
    }
}

@media only screen and (min-width:767px) {
    .faq-list--item {
        box-shadow: 0 10px 10px 0 rgba(68, 68, 102, .1);
        border-radius: 8px;
        width: 1000px;
        margin: 40px auto 0
    }
}

.faq-list--item:first-child {
    margin: 8.6666666667vw auto 0
}

@media only screen and (min-width:767px) {
    .faq-list--item:first-child {
        margin: 4.0625vw auto 0
    }
}

@media only screen and (min-width:767px) {
    .faq-list--item:first-child {
        margin: 65px auto 0
    }
}

.faq-list--tit {
    background: linear-gradient(90deg, #80ffec 0, #a6fff2 50%);
    padding: 3.3333333333vw 5.3333333333vw 3.3333333333vw;
    position: relative;
    display: flex;
    align-items: center
}

@media only screen and (min-width:767px) {
    .faq-list--tit {
        padding: 1.25vw 2.5vw 1.125vw
    }
}

@media only screen and (min-width:1400px) {
    .faq-list--tit {
        padding: 20px 40px 18px
    }
}

.faq-list--tit span {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw;
    line-height: 1.59375
}

@media only screen and (min-width:767px) {
    .faq-list--tit span {
        font-size: 1.25vw;
        line-height: 1.6
    }
}

@media only screen and (min-width:1400px) {
    .faq-list--tit span {
        font-size: 20px
    }
}

.faq-list--text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: 3.2vw;
    line-height: 1.7142857143;
    padding: 3.3333333333vw 5.3333333333vw 3.7333333333vw;
    white-space: pre-wrap
}

@media only screen and (min-width:767px) {
    .faq-list--text {
        font-size: 1vw;
        line-height: 1.75;
        padding: 2vw 2.5vw 1.875vw
    }
}

@media only screen and (min-width:1400px) {
    .faq-list--text {
        font-size: 16px;
        padding: 32px 40px 30px
    }
}

.modal-contents--container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: hidden scroll !important;
    pointer-events: auto
}

.modal-contents--container::-webkit-scrollbar {
    display: none
}

.modal-contents--box {
    position: relative;
    padding: 6.6666666667vw 4vw 0
}

@media only screen and (min-width:767px) {
    .modal-contents--box {
        padding: 2.8125vw 0 0
    }
}

.modal-contents--inner {
    position: relative;
    z-index: 19;
    background: #fff;
    width: 100%;
    padding: 8vw 4vw 6.6666666667vw
}

@media only screen and (min-width:767px) {
    .modal-contents--inner {
        width: 66.25vw;
        max-width: 1060px;
        padding: 3.75vw 0;
        margin: 0 auto
    }
}

@media only screen and (min-width:1400px) {
    .modal-contents--inner {
        width: 1060px;
        padding: 60px 0;
        margin: 0 auto
    }
}

.modal-contents--close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

@media only screen and (min-width:767px) {
    .modal-contents--list {
        display: flex
    }
}

@media only screen and (max-width:767px) {
    .modal-contents--item:nth-child(n+2) {
        border-top: 1px solid #ebebf2;
        padding: 8vw 0 0;
        margin: 6.6666666667vw 0 0
    }
}

@media only screen and (min-width:767px) {
    .modal-contents--item {
        flex-basis: 50%;
        padding: 0 3.75vw
    }

    .modal-contents--item:nth-child(even) {
        border-left: 1px solid #ebebf2
    }
}

@media only screen and (min-width:1400px) {
    .modal-contents--item {
        padding: 0 60px
    }
}

@media only screen and (min-width:767px) {
    .modal-contents--block {
        padding: 0 6.25vw
    }
}

@media only screen and (min-width:1400px) {
    .modal-contents--block {
        padding: 0 100px
    }
}

.modal-contents--artist {
    text-align: center
}

.modal-contents--artist img {
    width: 34.6666666667vw;
    margin: 0 auto 3.3333333333vw;
    display: block
}

@media only screen and (min-width:767px) {
    .modal-contents--artist img {
        width: 16.25vw;
        margin: 0 auto 1.5625vw
    }
}

@media only screen and (min-width:1400px) {
    .modal-contents--artist img {
        width: 260px;
        margin: 0 auto 25px
    }
}

.modal-contents--artist span {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 4.2666666667vw
}

@media only screen and (min-width:767px) {
    .modal-contents--artist span {
        font-size: 2vw
    }
}

@media only screen and (min-width:767px) {
    .modal-contents--artist span {
        font-size: 32px
    }
}

.modal-contents--detail {
    font-size: 3.2vw;
    line-height: 2;
    margin: 5.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .modal-contents--detail {
        font-size: .875vw;
        line-height: 1.8571428571;
        margin: 2.5vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .modal-contents--detail {
        font-size: 14px;
        margin: 40px 0 0
    }
}

.modal-gallery--scroll {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: hidden scroll !important;
    pointer-events: auto
}

.modal-gallery--scroll::-webkit-scrollbar {
    display: none
}

.modal-gallery--inner {
    position: relative
}

.modal-gallery--container {
    position: relative;
    z-index: 10;
    width: 92vw;
    padding: 6.6666666667vw 4vw;
    margin: 0 auto
}

@media only screen and (min-width:767px) {
    .modal-gallery--container {
        width: 37.5vw;
        padding: 2.8125vw 0
    }
}

@media only screen and (min-width:1400px) {
    .modal-gallery--container {
        width: 600px
    }
}

.modal-gallery--close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.modal-gallery--logo {
    height: 14vw;
    display: flex;
    justify-content: center
}

@media only screen and (min-width:767px) {
    .modal-gallery--logo {
        height: 4.1875vw
    }
}

@media only screen and (min-width:1400px) {
    .modal-gallery--logo {
        height: 67px
    }
}

.modal-gallery--logo img {
    width: auto;
    max-width: none;
    height: 100%;
    max-height: 100%
}

.modal-gallery--name {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 700;
    font-size: 5.3333333333vw;
    color: #fff;
    text-align: center;
    margin: 3.3333333333vw 0 0
}

@media only screen and (min-width:767px) {
    .modal-gallery--name {
        font-size: 1.5vw;
        line-height: 1.0833333333;
        margin: 1.5625vw 0 -.3125vw
    }
}

@media only screen and (min-width:1400px) {
    .modal-gallery--name {
        font-size: 24px;
        margin: 25px 0 -5px
    }
}

.modal-gallery--comics img {
    display: block;
    margin: 4vw 0 0
}

@media only screen and (min-width:767px) {
    .modal-gallery--comics img {
        margin: 1.875vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .modal-gallery--comics img {
        margin: 30px 0 0
    }
}

.modal-store--container {
    width: fit-content;
    margin-inline: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.modal-store--img {
    display: block;
    width: 82.2666666667vw;
    margin-left: .5333333333vw;
    position: relative
}

@media only screen and (min-width:767px) {
    .modal-store--img {
        width: 69.625vw;
        margin-left: 0;
        box-shadow: .625vw .625vw 1.3125vw 0 rgba(0, 0, 0, .32)
    }

    .modal-store--img:before {
        display: block;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: .2s
    }

    .modal-store--img:hover:before {
        display: block;
        content: "";
        background-color: rgba(255, 255, 255, .4)
    }
}

.modal-store--close {
    width: 8.9333333333vw;
    height: 8.9333333333vw;
    top: -12.5333333333vw;
    right: 2.6666666667vw;
    opacity: 1
}

.modal-store--close:active {
    top: -12.5333333333vw
}

@media only screen and (min-width:767px) {
    .modal-store--close {
        width: 5.0625vw;
        height: 5.0625vw;
        top: -6.125vw;
        right: 0;
        transition: .2s
    }

    .modal-store--close:active {
        top: -6.125vw
    }

    .modal-store--close:hover {
        opacity: .65
    }
}

.top-mv--bg-video.js-hide {
    opacity: 0;
    transition: .4s
}

.top .js-top {
    opacity: 0;
    transition: .8s;
    transition-delay: 1.2s
}

.top .js-top.js-show {
    opacity: 1
}

.top .js-top.tit>img {
    transform: scale(1.1) translateX(-50%);
    transition-delay: .8s
}

.js-catch {
    transition-delay: .8s
}

.js-catch.js-show>img {
    transform: none
}

.js-catch>img {
    transform: scale(1.1);
    transform-origin: center center;
    transition: .8s;
    transition-delay: .8s
}

.js-common {
    opacity: 0;
    transform: translateY(4vw);
    will-change: transform
}

.js-common.js-show {
    opacity: 1;
    transform: none;
    transition: .6s
}

@media only screen and (min-width:767px) {
    .js-common {
        transform: translateY(1.875vw)
    }
}

@media only screen and (min-width:1400px) {
    .js-common {
        transform: translateY(30px)
    }
}

.js-change {
    display: none !important
}

.js-change.js-visible {
    display: block !important
}

.js-change__show {
    transition: .6s
}

.js-change__show.js-hide {
    opacity: 0;
    transform: translateY(6.6666666667vw)
}

@media only screen and (min-width:767px) {
    .js-change__show.js-hide {
        transform: translateY(1.875vw)
    }
}

@media only screen and (min-width:1400px) {
    .js-change__show.js-hide {
        transform: translateY(30px)
    }
}

.js-hide .chara-unite__bg {
    transition-delay: 0s !important
}

.chara-unite__main.js-show .chara-unite__chara img {
    opacity: 1;
    transform: none;
    transition: .6s
}

.chara-unite__main.js-show .chara-unite__chara:nth-child(1) img {
    transition-delay: .5s
}

.chara-unite__main.js-show .chara-unite__bg {
    opacity: 1;
    transition: .6s;
    transition-delay: .5s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara img {
    opacity: 1;
    transform: none;
    transition: .6s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara:nth-child(1) img {
    transition-delay: .1s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara:nth-child(2) img {
    transition-delay: .2s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara:nth-child(3) img {
    transition-delay: .3s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara:nth-child(4) img {
    transition-delay: .4s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara:nth-child(5) img {
    transition-delay: .5s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__chara:nth-child(6) img {
    transition-delay: .6s
}

.chara-unite__main.js-show.virtualsinger .chara-unite__bg {
    opacity: 1;
    transition: .6s;
    transition-delay: .8s
}

@media only screen and (min-width:767px) {
    .chara-unite__main.js-show.js-end.virtualsinger .chara-unite__chara .img img {
        transition-delay: 0s !important
    }
}

.chara-unite__bg {
    opacity: 0
}

.chara-unite__chara img {
    opacity: 0;
    transform: translateY(13.3333333333vw)
}

@media only screen and (min-width:767px) {
    .chara-unite__chara img {
        transform: translateY(6.25vw)
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__chara img {
        transform: translateY(100px)
    }
}