@media (max-width: 768px) {

    body {
        background-color: rgb(0, 0, 0);
        background-size: 100% auto;
    }

    .content {
        width: 100vw;
        max-width: 100vw;
    }

    .content::-webkit-scrollbar {
        display: none;
    }

    .section_top {
        position: relative;
        width: 100vw;
        height: 178.1vw;
        background: url(../images/MtopBg.jpg) no-repeat;
        background-size: 100% auto;
    }

    .navbar {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 8vw;
        z-index: 99;
    }

    .hover-text {
        font-size: 2.6vw;
        font-weight: 800;
    }

    .topCharacter {
        position: relative;
        margin: 0 0 0 0;
    }

    .topC01 {
        position: absolute;
        width: 135vw;
        height: 141.2vw;
        top: 37vw;
        left: -8vw;
        background: url(../images/MtopC01.png) no-repeat;
        background-size: 100% auto;
    }

    .topC02 {
        position: absolute;
        width: 102vw;
        height: 162.5vw;
        left: 21vw;
        top: 0vw;
        background: url(../images/MtopC02.png) no-repeat;
        background-size: 100% auto;
        animation: breathing 4s ease-out infinite normal;
    }

    .topC03 {
        position: absolute;
        width: 82vw;
        height: 130.4vw;
        left: -15.6vw;
        top: 23.8vw;
        background: url(../images/MtopC03.png) no-repeat;
        background-size: 100% auto;
    }

    .topFile {
        top: 109vw;
        left: 5vw;
    }

    .topCards {
        width: 90.6vw;
        height: 31.4vw;
        background: url(../images/MtopCards.png) no-repeat;
        background-size: 100% auto;
    }

    .topTitle {
        width: 90vw;
        height: 20.8vw;
        margin-top: -4.5vw;
        margin-left: 1.4vw;
    }

    .topSubtitle {
        width: 77.6vw;
        height: 7vw;
    }

    .topLogo {
        width: 84.6vw;
        height: 13.8vw;
    }

    .sectionStory {
        position: relative;
        width: 100vw;
        height: 99vw;
        background: url(../images/MstoryBg.jpg) no-repeat;
        background-size: 100% auto;
    }


    .storyBox {
        width: 82vw;
        height: 78vw;
        padding: 0 4vw;
    }

    .storyBox h1 {
        font-size: 3.2vw;
    }

    .storyBox p {
        font-size: 2.5vw;
    }

    .sectionCharacter {
        width: 100vw;
        height: 226vw;
    }

    .characterBox01 {
        position: absolute;
        overflow: hidden;
        width: 100vw;
        height: 227vw;
        background: url(../images/McharacterBg01.jpg) no-repeat;
        background-size: 100% auto;        
    }

    .characterBox02 {
        position: absolute;
        overflow: hidden;
        width: 100vw;
        height: 227vw;
        background: url(../images/McharacterBg02.jpg) no-repeat;
        background-size: 100% auto;
    }

    .characterBox03 {
        position: absolute;
        overflow: hidden;
        width: 100vw;
        height: 227vw;
        background: url(../images/McharacterBg03.jpg) no-repeat;
        background-size: 100% auto;
    }

    .eName01 {
        left: -11.8vw;
        top: 13.8vw;
        width: 127.4vw;
        height: 46.5vw;
    }

    .eName02 {
        left: -5vw;
        top: 14.5vw;
        width: 111.5vw;
        height: 43.5vw;
        z-index: 0;
    }

    .eName03 {
        left: 4vw;
        top: 16.5vw;
        width: 93vw;
        height: 39.5vw;
        z-index: 0;
    }

    .name01 {
        left: 3.5vw;
        top: 93vw;
        width: 92.4vw;
        height: 28.5vw;
        z-index: 1;
    }

    .name02 {
        left: 3.5vw;
        top: 93vw;
        width: 75.5vw;
        height: 28.5vw;
    }

    .name03 {
        left: 3.5vw;
        top: 93vw;
        width: 75.5vw;
        height: 28.5vw;
    }

    .character01 {
        left: 1.6vw;
        top: 23.2vw;
        width: 106.8vw;
        height: 105.5vw;
    }

    .character02 {
        left: -1vw;
        top: 6vw;
        width: 142.5vw;
        height: 91.5vw;
    }

    .character03 {
        left: 1.6vw;
        top: 7.5vw;
        width: 110.8vw;
        height: 96.5vw;
    }

    .leftText {
        left: 3vw;
        top: -2vw;
        height: 88vw;
        font-size: 5vw;
    }

    .rightText {
        position: absolute;
        left: 6vw;
        width: 88vw;
    }

    .rightText01,
    .rightText02,
    .rightText03 {
        top: 123vw;
    }

    .outline {
        font-size: 3.8vw;
    }

    .skillTitle {
        margin-top: -1vw;
        margin-left: -2.3vw;
        width: 55vw;
        height: 7.5vw;
        font-size: 4.5vw;
    }

    .skill {
        margin-left: -4.6vw;
        margin-top: -2vw;
        padding: 4vw 2vw 0vw 2vw;
        width: 96vw;
        height: 36vw;
        overflow-y: scroll;
    }

    .pToDown{
        margin-top: 20vw;
    }

    .skillicon {
        height: 18vw;
        margin-right: 2.5vw;
    }

    .skill p {
        font-size: 2.6vw;
        line-height: 4vw;
    }

    .adorn01 {
        position: absolute;
        top: -2vw;
        width: 100vw;
        height: 221.5vw;
        background: url(../images/Madorn01.png) no-repeat;
        background-size: 100% auto;
    }

    .adorn02 {
       position: absolute;
        top: 0vw;
        width: 100vw;
        height: 225.5vw;
        background: url(../images/Madorn02.png) no-repeat;
        background-size: 100% auto;
    }

    .adorn03 {
       position: absolute;
        top: -2vw;
        width: 100vw;
        height: 222.5vw;
        background: url(../images/Madorn03.png) no-repeat;
        background-size: 100% auto;
    }

    .characterBtn {
        position: absolute;
        right: 28vw;
        top: 205vw;
        display: flex;
        flex-direction: row;
        gap: 3vw;
        /*flex間距*/
    }

    .characterBtn button img {
        width: 12vw;
        height: 12vw;
    }

    .sectionCampaign {
        width: 100vw;
        height: 171vw;
        background: url(../images/McampaignBg.jpg) no-repeat;
        background-size: 100% auto;
    }

    .campaignTop {
        display: flex;
        height: 20vw;
        margin-top: -1vw;
    }

    .topText {
        width: 53vw;
        height: 21vw;
        margin-top: 0.6vw;
    }

    .webTopTextH1 {
        display: none;
    }

    .mTopTextH1 {
        display: block;
        text-align: center;
    }

    .topText h1 {
        height: 14.2vw;
        font-size: 5.3vw;
    }

    .topText p {
        height: 10.2vw;
        font-size: 3.8vw;
        line-height: 5vw;
    }

    .goX {
        width: 34vw;
        height: 6vw;
        margin-top: 1.6vw;
    }

    .campaignC {
        width: 37.6vw;
        height: 49vw;
    }

    .campaignBottom {
        height: 86vw;
        margin-top: 23.5vw;
    }

    .giftBox {
        width: 90vw;
        height: 66vw;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .campaignG {
        margin: 1.5vw 2.5vw;
        height: 40vw;
    }

    .campaignG:nth-child(1) {
        width: 36vw;
    }

    .campaignG:nth-child(2) {
        width: 36vw;
    }

    .campaignG:nth-child(3) {
        width: 85vw;
    }

    .storeBox {
        margin-top: 18vw;
    }

    .googleB,
    .appB {
        width: 30vw;
        height: 9.5vw;
        margin: 5vw 2.5vw;
    }

    .sectionVideo{
        overflow: hidden;
    }

    .youtube-frame {
        right: -3vw;
        bottom: 0%;
        width: 111vw;
        height: 115vw;
        padding-bottom: -8vw;
    }

    .mask-image {
        display: none;
    }

    .Mmask-image {
        width: 100vw;
        display: block;
    }

    .videoC {
        width: 64.7vw;
        height: 55.4vw;
        left: -5.5vw;
        transform:rotate(5deg);
    }

    .videoCcover {
        display: none;
    }

    .ytBtn {
        top: 0;
        left: 3vw;
        width: 20vw;
        height: 20vw;
    }

}