@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("../mochi_files/home01.jpg");
    background-size: cover;
    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
    }
}


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

.header--inner {
    width: 100vw
}

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

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

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

.chara-sub--box {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 20vw 15vw 0vw 15vw;
    z-index: 1;
    padding: 0vw 0vw 0vw 0vw
}

@media only screen and (min-width:767px) {
    .chara-sub--box {
        margin: -2.75vw 300px 0px 300px;
        padding: 5vw 0vw 5vw 0vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-sub--box {
        margin: 0px 300px 0px 300px;
        padding: 4vw 0vw 5vw 0vw
    }
}

.chara-sub--btn {
    box-shadow: 0 .6666666667vw 1.0666666667vw .2666666667vw rgba(68, 68, 102, .1);
    background-color: rgb(238, 190, 119);
    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: rgb(238, 190, 119)
    }
}

.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: rgb(238, 190, 119);
    pointer-events: none
}

.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-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-img {
    position: relative;
    height: 140vw
}

.chara-detail--main-img img {
    height: 202.9333333333vw;
    max-width: none;
    position: absolute;
    left: 47%;
    transform: translateX(-30%);
    top: 0.6666666667vw;
    width: 250px;
    height: auto;
    object-fit: cover
}

@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: 80vw;
        height: 66.25vw;
        max-width: none;
        top: 0vw;
        transform: translateX(-60%)
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-img {
        height: 1183px
    }

    .chara-detail--main-img img {
        width: 1500px;
        height: auto;
        top: -95px;
        transform: translateX(-60%)
    }
}

.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: 15.375vw;
        left: 45%;
        margin-left: -35vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-detail--main-message {
        top: 200px;
        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
    }
}

@media only screen and (min-width:1601px) {
    .chara-detail--main-arw.prev {
        left: 50%;
        margin-left: -768px
    }
}

@media only screen and (min-width:1601px) {
    .chara-detail--main-arw.next {
        right: auto;
        left: 50%;
        margin-left: 768px
    }
}

.niisan .chara-detail--main-message__text {
    background-color: rgb(233, 153, 61)
}

.yasuharu .chara-detail--main-message__text {
    background-color: rgb(142, 204, 136)
}

.ritory .chara-detail--main-message__text {
    background-color: rgb(136, 204, 176)
}

.mochidzuki .chara-detail--main-message__text {
    background-color: rgb(253, 227, 79)
}

.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-i {
        font-family: "M PLUS 1", sans-serif;
        font-weight: 500;
        font-size: 1.5vw;
        letter-spacing: .08em;
        line-height: 1
    }

    .chara-data--name-i small {
        font-size: 1vw
    }
}

@media only screen and (min-width:1400px) {
    .chara-data--name-i {
        font-size: 24px
    }

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

@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-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(247, 180, 117, 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
}

.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);
        top: 190px
    }
}

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