@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 {
    background-image: url("home00.jpg");
    background-size: cover;
    width: 100%
}

a {
    color: rgb(60, 77, 133);
    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:768px) {
    .pc-none {
        display: block
    }
}

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

.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.top .header--logo {
    display: none
}

.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: #313d5f
}

.top-section--btn {
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(45, 45, 68, 0.1);
    background-color: rgb(167, 220, 255);
    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(45, 45, 68, 0.1);
        transition: .2s
    }
}

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

@media only screen and (min-width:767px) {
    .top-section--btn:hover {
        box-shadow: none;
        background-color: rgb(155, 171, 190)
    }

    .top-section--btn:hover span {
        color: rgb(93, 117, 128)
    }
}

.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
    }
}

.chara-sub--box {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    z-index: 1
}

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

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

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

@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__main {
    position: relative;
    width: 100%;
    height: 60.3333333333vw
}

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

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

.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 .chara-unite__test {
    left: auto;
    right: 0;
    width: 100vw
}

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

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

.chara-unite__main .niisan {
    width: 28vw;
    top: -15vw;
    transform: translateX(calc(-50% + -13vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main .niisan {
        width: 19vw;
        top: -15.625vw;
        transform: translateX(calc(-50% + -12vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main .niisan {
        width: 220px;
        top: -230px;
        transform: translateX(calc(-150% + 100px))
    }
}

.chara-unite__main .niisan .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 .niisan .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 .niisan .chara-unite__chara-link {
        width: 230px;
        height: 600px;
        top: 60px;
        transform: translateX(calc(-50% + 120px))
    }
}

.chara-unite__main .yasuharu {
    width: 28vw;
    top: -15vw;
    transform: translateX(calc(-50% + -32vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main .yasuharu {
        width: 19vw;
        top: -15.625vw;
        transform: translateX(calc(-50% + -30vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main .yasuharu {
        width: 220px;
        top: -230px;
        transform: translateX(calc(-280% + 200px))
    }
}

.chara-unite__main .yasuharu .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 .yasuharu .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 .yasuharu .chara-unite__chara-link {
        width: 230px;
        height: 600px;
        top: 60px;
        transform: translateX(calc(-50% + 100px))
    }
}

.chara-unite__main .ritory {
    width: 28vw;
    top: -15vw;
    transform: translateX(calc(-50% + 28vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main .ritory {
        width: 19vw;
        top: -15.625vw;
        transform: translateX(calc(-50% + 27vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main .ritory {
        width: 220px;
        top: -225px;
        transform: translateX(calc(150% - 130px))
    }
}

.chara-unite__main .ritory .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 .ritory .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 .ritory .chara-unite__chara-link {
        width: 220px;
        height: 550px;
        top: 100px;
        transform: translateX(calc(-50% + 115px))
    }
}

.chara-unite__main .mochidzuki {
    width: 28vw;
    top: -13vw;
    transform: translateX(calc(-50% + 10vw))
}

@media only screen and (min-width:767px) {
    .chara-unite__main .mochidzuki {
        width: 19vw;
        top: -15.625vw;
        transform: translateX(calc(-50% + 8vw))
    }
}

@media only screen and (min-width:1400px) {
    .chara-unite__main .mochidzuki {
        width: 220px;
        top: -230px;
        transform: translateX(calc(110% - 250px))
    }
}

.chara-unite__main .mochidzuki .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 .mochidzuki .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 .mochidzuki .chara-unite__chara-link {
        width: 260px;
        height: 480px;
        top: 160px;
        transform: translateX(calc(-50% + 115px))
    }
}

.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
    }
}

.chara-about__inner {
    position: relative;
    margin-top: 0;
    padding-left: 11.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:0
    }
}

.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 {
    width: 46.4vw
}

@media only screen and (min-width:767px) {
    .chara-about__logo {
        width: 21.875vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-about__logo {
        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: 30px
    }
}

.chara-about__copy .chara-about__copy-text {
    background-color: rgb(0, 153, 255)
}

.chara-about__copy-text {
    display: inline-block;
    font-size: 5.4vw;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 550;
    background-color: #fff;
    padding: 0vw 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: 30px;
        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: 80px;
        font-size: 22px
    }
}

.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(../fam_files/play.png);
    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: rgb(39, 176, 255);
        background-image: url(../fam_files/play2.png)
    }
}

@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-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: rgb(0, 112, 204)
    }
}

.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(../fam_files/play.png);
    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: rgb(39, 176, 255);
        background-image: url(../fam_files/play2.png)
    }
}

@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
    }
}

.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: -2vw 0 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: 2vw;
    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: #313d5f;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 10.6666666667vw;
    line-height: 1;
    text-align: center;
    margin: 13vw 0 0
}

@media only screen and (min-width:767px) {
    .page-main--title-text {
        font-size: 5vw;
        margin: 2vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-main--title-text {
        font-size: 70px
    }
}

@media only screen and (min-width:1400px) {
    .page-main.character {
        height: 220px
    }
}

@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: -90px 0 0
    }
}

.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)
    }
}

.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__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)
    }
}


.chara-navi--inner {
    background-color: rgba(255, 255, 255, .8);
    position: relative;
    z-index: 2
}

.chara-navi--member {
    width: 100%;
    padding: 10px 10px 10px;
    margin: 0 0 0
}

@media only screen and (min-width:767px) {
    .chara-navi--member {
        padding: 10px 10px 10px;
        margin: 3.75vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .chara-navi--member {
        padding: 10px 10px 10px;
        margin: 60px 0 0
    }
}

.chara-navi--member {
    background-color: rgba(117, 195, 247, 0.15)
}

.chara-navi--member-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 10px 10px 10px
}

.chara-navi--member-item {
    width: 18vw;
    height: 18vw;
    margin: 1vw 1vw 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
}

.page-news {
    border-radius: 0 0 3.3333333333vw 3.3333333333vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
    width: 100%;
    padding: 7vw 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

@media only screen and (min-width:767px) {
    .page-news {
        background-size: cover;
        border-radius: 0 0 1.875vw 1.875vw;
        width: 100vw;
        padding: 0
    }
}

@media only screen and (min-width:1400px) {
    .page-news {
        border-radius: 0 0 30px 30px;
        width: 100%
    }
}

.page-news--title {
    background-position: center center;
    background-repeat: repeat-x;
    background-size: auto 16vw;
    width: 100%;
    padding: 2.6666666667vw 0;
    margin-top: 2.5vw;
    position: relative
}

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

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

.page-news--title-text {
    color: #313d5f;
    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-news--title-text {
        font-size: 5vw
    }
}

@media only screen and (min-width:1400px) {
    .page-news--title-text {
        font-size: 70px
    }
}

@media only screen and (min-width:1400px) {
    .page-news.news {
        height: 220px
    }
}

@media only screen and (min-width:767px) {
    .page-news.news .page-main--title {
        margin: -1.25vw 0 0
    }
}

@media only screen and (min-width:1400px) {
    .page-news.news .page-main--title {
        margin: -90px 0 0
    }
}

.news-sub--box {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 0;
    z-index: 1
}

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

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

.news-unite__inner {
    position: relative;
    margin-top: 0vw
}

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

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

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

.news-unite__main {
    position: relative;
    width: 100%;
    height: 20.3333333333vw
}

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

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

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

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

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

.news-unite__main .news-unite__test {
    left: auto;
    right: 0;
    width: 100vw
}

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

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

.news-unite__main .first {
    width: 28vw;
    top: 0vw;
    transform: translateX(calc(-50% + -28.625vw))
}

@media only screen and (min-width:767px) {
    .news-unite__main .first {
        width: 220px;
        top: -100px;
        transform: translateX(calc(-59% + -300px))
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__main .first {
        width: 220px;
        top: -100px;
        transform: translateX(calc(-75% + -350px))
    }
}

.news-unite__main .first .news-unite__news-link {
    width: 28vw;
    top: 0vw;
    height: 100%;
    transform: translateX(calc(0%))
}

@media only screen and (min-width:767px) {
    .news-unite__main .first .news-unite__news-link {
        width: 264px;
        top: 0px;
        transform: translateX(calc(0%))
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__main .first .news-unite__news-link {
        width: 330px;
        height: 118px;
        top: 0px;
        transform: translateX(calc(0%))
    }
}

.news-unite__main .second {
    width: 28vw;
    top: 0vw;
    transform: translateX(calc(-50% ))
}

@media only screen and (min-width:767px) {
    .news-unite__main .second {
        width: 220px;
        top: -100px;
        transform: translateX(calc(-59%))
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__main .second {
        width: 220px;
        top: -100px;
        transform: translateX(calc(-75%))
    }
}

.news-unite__main .second .news-unite__news-link {
    width: 28vw;
    top: 0vw;
    height: 100%;
    transform: translateX(calc(0%))
}

@media only screen and (min-width:767px) {
    .news-unite__main .second .news-unite__news-link {
        width: 264px;
        top: 0px;
        transform: translateX(calc(0%))
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__main .second .news-unite__news-link {
        width: 330px;
        height: 118px;
        top: 0px;
        transform: translateX(calc(0%))
    }
}

.news-unite__main .third {
    width: 28vw;
    top: 0vw;
    transform: translateX(calc(-50% + 28.625vw))
}

@media only screen and (min-width:767px) {
    .news-unite__main .third {
        width: 220px;
        top: -100px;
        transform: translateX(calc(-59% + 300px))
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__main .third {
        width: 220px;
        top: -100px;
        transform: translateX(calc(-75% + 350px))
    }
}

.news-unite__main .third .news-unite__news-link {
    width: 28vw;
    top: 0vw;
    height: 100%;
    transform: translateX(calc(0%))
}

@media only screen and (min-width:767px) {
    .news-unite__main .third .news-unite__news-link {
        width: 264px;
        top: 0px;
        transform: translateX(calc(0%))
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__main .third .news-unite__news-link {
        width: 330px;
        height: 118px;
        top: 0px;
        transform: translateX(calc(0%))
    }
}

.news-unite__news {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none
}

@media only screen and (min-width:767px) {
    .news-unite__news.hover:has(.news-unite__news-link:hover) {
        z-index: 100
    }

    .news-unite__news.hover .news-unite__news-link:hover~.img {
        z-index: 100
    }

    .news-unite__news.hover .news-unite__news-link:hover~.img.default img {
        transform: scale(1.05);
        opacity: 0
    }

    .news-unite__news.hover .news-unite__news-link:hover~.img.hover {
        transform: scale(1.05);
        opacity: 1 !important
    }
}

.news-unite__news-img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 100
}

@media only screen and (min-width:767px) {
    .news-unite__news-img {
    position: relative;
    display: block;
    width: 120%;
    height: 120%;
    z-index: 100
}
}

@media only screen and (min-width:1400px) {
    .news-unite__news-img {
        position: relative;
        display: block;
        width: 150%;
        height: 150%;
        z-index: 100
    }
}


.news-unite__news-link {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    pointer-events: auto
}

.news-unite__news .img {
    position: relative
}

@media only screen and (min-width:767px) {
    .news-unite__news .img.default img {
        transition: .6s
    }
}

@media only screen and (max-width:767px) {
    .news-unite__news .img.hover {
        display: none
    }
}

@media only screen and (min-width:767px) {
    .news-unite__news .img.hover {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0 !important;
        transition: .6s;
        transition-delay: 0s !important
    }
}

.news-unite__main.js-show .news-unite__news img {
    opacity: 1;
    transform: none;
    transition: .6s
}

.news-unite__main.js-show .news-unite__news:nth-child(1) img {
    transition-delay: .5s
}

.news-unite__main.js-show .news-unite__bg {
    opacity: 1;
    transition: .6s;
    transition-delay: .5s
}

.news-unite__bg {
    opacity: 0
}

.news-unite__news img {
    opacity: 0;
    transform: translateY(13.3333333333vw)
}

@media only screen and (min-width:767px) {
    .news-unite__news img {
        transform: translateY(6.25vw)
    }
}

@media only screen and (min-width:1400px) {
    .news-unite__news img {
        transform: translateY(100px)
    }
}

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

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

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

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

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