@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
}

html {
    touch-action: manipulation;
    overflow-x: hidden;
}

body {
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    height: available;
    height: -moz-available;
}

h1 {
    width: 100%;
    max-width: 611px;
    margin: auto;
}

a {
    text-decoration: none;
}

.title-background {
    width: 100%;
}

.title-background .content {
    display: flex;
    width: 100%;
}

.title-background .left {
    width: 50%;
}

.title-background .left img {
    width: inherit;
    margin-top: 20px;
    max-width: 100%;
}

.title-background .right {
    width: 50%;
    text-align: right;
}

.title-background .right img {
    width: inherit;
    max-width: 100%;
}

.contents {
    margin: 0 auto;
    width: 100%;
    min-height: 100%;
    height: -moz-fit-content;
    height: fit-content;
    background-image: url("../assets/images/mobile/ozlp_background.png");
    background-repeat: repeat;
    z-index: 2;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

}

.side-thumb {
    position: relative;
    display: flex;
    width: 100%;
    margin-top: 3em;
}

.side-thumb .content {
    display: flex;
    width: 100%;
}

.side-thumb .left {
    width: 50%;
}

.side-thumb .left img {
    width: inherit;
    max-width: 100%;
}

.side-thumb .right {
    text-align: right;
    width: 50%;
}

.side-thumb .right img {
    width: inherit;
    max-width: 100%;
}

.side-thumb span {
    margin-top: -50px;
}


.title-message-background {
    background-position-x: center;
    background-position-y: bottom;
    background-size: contain;
}


.title-message {
    width: 90%;
    max-width: max-content;
    margin: 0 auto;
    text-align: center;
    display: ruby;
}

.title-message img {
    width: 100%;
    max-width: max-content;
}

.title-message .capture {
    width: 100%;
    margin-top: -20px;
}

.title-message .pc {
    display: flex;
}


.title-message .tablet {
    width: initial;
}

.title-message a:hover img {
    opacity: 0.6;
}

.release-message {
    max-width: 90%;
    margin: 0 auto;
}

.release-message img {
    max-width: 90%;
    margin: 0 auto;
}

.contents .background {
    position: absolute;
    display: grid;
    width: 100%;
}

.contents .aligncenter {
    text-align: center;
    position: relative;
}

.contents .aligncenter li {
    list-style: none;
}

.contents .aligncenter img {
    max-width: 100%;
}

.contents .copyright {
    margin-top: 10px;
}

.contents .twitter {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
    -ms-background-position-x: center;
    background-position-x: center;
}

.contents .twitter-iframe {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
}

.contents .video {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
    -ms-background-position-x: center;
    background-position-x: center;
}

.contents .video-box {
    height: 100%;
    margin-top: 9%;
}

.contents .video {
    width: 90vw;
    height: calc(90vw / 16 * 9);
    max-width: 807px;
    max-height: 446px;
    background-image: url("../assets/images/pc/ozlp_video_bg.png");
}

.contents .video video {
    width: 68vw;
    height: calc(68vw / 16 * 9);
    max-width: 600px;
    max-height: 337px;
}

.bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom .link-content {
    width: 100%;
    z-index: 1;
}

.bottom .link-content .textlink {
    width: 100%;
    color: #3EAACE;
}

.bottom .link-content .textlink a {
    color: #3EAACE;
    text-decoration-line: none;
}

.bottom .link-content .textlink a:hover {
    color: #999999;
    text-decoration-line: underline;
}

.logo {
    position: fixed;
    top: 29px;
    right: 29px;
    z-index: 3;
}

.logo img {
    opacity: 1;
}

.logo a:hover img {
    opacity: 0.6;
}

.topicon {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 3;
}

.topicon img {
    opacity: 1;
}

.topicon a:hover img {
    opacity: 0.6;
}

.footer {
    background-color: #7DD386;
    border-radius: 32px 32px 0 0;
    color: #FFFFFF;

    display: flex;
    justify-content: center;
    align-items: center;

    .container {
        width: 720px;
        margin-top: 50px;
        margin-bottom: 50px;

        .footer_logo > img {
            display: inline;
            width: 204px;
            margin: 0 0 32px 0;
        }

        .footer_button {
            display: flex;
            justify-content: center;
            margin-bottom: 56px;

            .footer_button__button {
                display: flex;
                flex-direction: row;
                column-gap: 2px;

                li {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 42px;
                    width: 174px;
                    background: #FFFFFF;
                    list-style: none;

                    a {
                        display: inline-block;
                        font-size: 12px;
                        color: #7DD386;
                    }
                }

                li:hover {
                    opacity: 80%;
                }

                li:first-child {
                    border-radius: 50px 0 0 50px;
                }

                li:last-child {
                    border-radius: 0 50px 50px 0;
                }
            }
        }

        .footer_link_network__link_network {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            row-gap: 20px;
            width: 100%;
            margin-bottom: 48px;

            li {
                display: flex;
                flex-direction: row;
                align-items: center;

                a {
                    color: #FFFFFF;
                    text-align: left;
                }

                &::before {
                    background-color: #FFFFFF;
                    border-radius: 1.5px;
                    content: "";
                    display: inline-block;
                    height: 36px;
                    margin-right: 16px;
                    min-width: 3px;
                }
            }

            li:hover {
                opacity: 80%;
            }
        }

        .footer_copyright > p {
            text-align: left;
            font-size: 12px;
        }
    }

    .footer_link_network__title {
        p {
            font-size: 16px;
            text-align: left;
            font-weight: bold;
        }
    }
}

@media screen and (min-width: 600px) {
    .contents {
        background-image: url("../assets/images/tablet/ozlp_background.png");
    }

    .title-message .middle {
        margin-bottom: 8px;
    }

    .campaign-background {
        width: 100%;
        margin: 0 auto;
        background-repeat: round;
        background-size: auto;
        background-image: url("../assets/images/tablet/ozlp_background_2.png");
        -ms-background-position-x: center;
        background-position-x: center;
    }

    .campaign .content2 {
        margin: 0 auto;
        margin-top: 3em;
        background-repeat: no-repeat;
        background-size: auto;
        background-image: url("../assets/images/tablet/ozlp_background_3.png");
        -ms-background-position-x: left;
        background-position-x: left;
        background-position-y: 10em;
        width: 90%;
    }

}

@media screen and (min-width: 801px) {
    .contents {
        background-image: url("../assets/images/pc/ozlp_background.png")
    }

    .title-message .tablet {
        display: none;
    }

    .title-message .pc .right {
        width: max-content;
        text-align: left;
        display: grid;
        max-width: 50%;
    }

    .title-message .pc .right img {
        max-width: max-content;
        max-width: -moz-max-content;
    }

    .title-message .download-message {
        max-width: 65%;
        margin-left: 3%;
    }

    .title-message .appbutton {
        display: flex;
    }

    .title-message .appstore {
        width: fit-content;
        padding-left: 3%;
    }

    .contents .twitter-size {
        width: 90vw;
        height: calc(90vw * 0.5);
        max-width: 771px;
        max-height: 380px;
        background-image: url("../assets/images/pc/ozlp_twitter.png");
        transform: translateX(-20px);
    }

    .contents .twitter-iframe {
        width: 75vw;
        height: calc(75vw / 8 * 3);
        max-width: 620px;
        max-height: 250px;
        transform: translate(10px, 10px)
    }

    .campaign-background {
        max-width: -mos-max-content;
        background-repeat: no-repeat;
        background-size: auto;
        background-image: url("../assets/images/pc/ozlp_background_2.png");
        -ms-background-position-x: center;
        background-position-x: center;
        background-position-y: 50em;
        margin-block-start: 1em;
        text-align: right;
    }

    .campaign .content {
        margin-left: -3em;
    }

    .campaign .content2 {
        margin: 0 auto;
        margin-top: 3em;
        background-repeat: no-repeat;
        background-size: auto;
        background-image: url("../assets/images/pc/ozlp_background_3.png");
        -ms-background-position-x: center;
        background-position-x: center;
        background-position-y: 10em;
    }

    .campaign-contents {
        margin: 0 auto;
        width: -moz-fit-content;
        width: fit-content;
    }

    .bottom {
        height: 140px;
        margin: 0 auto;
    }

    .bottom .link-content .textlink {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 800px) {
    .title-message-background {
        background-image: url("../assets/images/tablet/ozlp_background_1.png");
        background-repeat: no-repeat;
    }

    .side-thumb {
        display: none;
    }

    .title-message .pc {
        display: none;
    }

    .title-message img {
        width: initial;
    }

    .title-message .download-message {
        max-width: 90%;
        margin: 0 auto;
    }

    .title-message .appbutton {
        display: flex;
        display: ruby;
        width: fit-content;
        width: -moz-fit-content;
        margin: 0 auto;
        position: relative;
    }

    .title-message .appbutton img {
        max-width: initial;
    }

    .title-message .googleplay {
        margin-right: 18px;
    }

    .title-message .appstore {
        display: initial;
        width: initial;
        padding-left: 0;
        margin: auto;
    }

    .contents .video {
        width: 100%;
        height: calc(100vw / 16 * 9);
        max-width: 807px;
        max-height: 446px;
        background-image: url("../assets/images/tablet/ozlp_video_bg.png");
        margin-bottom: -0.3em;
    }

    .contents .video video {
        width: 78vw;
        height: calc(78vw / 16 * 9);
        max-width: 600px;
        max-height: 337px;
    }

    .contents .twitter-size {
        width: 90vw;
        height: calc(90vw * 0.5);
        max-width: 720px;
        max-height: 338px;
        margin-top: -0.7em;
        background-image: url("../assets/images/tablet/ozlp_twitter.png");
        background-position-y: 1em;
        transform: translateY(-16px);
    }

    .contents .twitter-iframe {
        width: 75vw;
        height: calc(75vw / 5 * 2);
        max-width: 570px;
        max-height: 250px;
        transform: translate(5px, 16px);
    }

    .campaign .content {
        width: 90%;
        max-width: -mos-max-content;
        max-width: max-content;
        margin: 0 auto;
    }

    .bottom {
        height: 120px;
        margin: 0 auto;
    }

    .bottom .link-content .textlink {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 599px) {
    html {
        height: 100%;
    }

    body {
        height: 100%;
    }


    .all {
        height: 100%;
    }

    .title-message-background {
        background-image: url("../assets/images/mobile/ozlp_background_1.png");
        background-repeat: no-repeat;
    }

    .title-message .tablet .appbutton img {
        max-width: 100%;
    }

    .release-message img {
        max-width: -moz-fit-content;
        max-width: fit-content;
    }

    .contents .video {
        width: 320px;
        height: 180px;
        max-width: 100%;
        max-height: calc(100vw / 5 * 3);
        margin: 0 auto;
        background-image: url("../assets/images/mobile/ozlp_video_bg.png");
    }

    .contents .video video {
        width: 75%;
        height: auto;
    }

    .contents .twitter-size {
        width: 100vw;
        height: calc(100vw / 3 * 2);
        max-width: 380px;
        max-height: 264px;
        background-image: url("../assets/images/mobile/ozlp_twitter.png");
        background-repeat: no-repeat;
        background-position-y: 0;
        transform: translate(0);
        margin-top: 0;
        overflow: auto;
    }

    .contents .twitter-iframe {
        width: 70vw;
        height: calc(70vw / 7 * 4);
        max-width: 280px;
        max-height: 170px;
        transform: translateY(5px);
    }

    .bottom .link-content .textlink {
        font-size: 0.7rem;
    }

    .campaign .content {
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
    }

    .logo {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 3;
    }

    .footer {
        .container {
            width: 380px;

            .footer_link_network__link_network {
                grid-template-columns: 1fr 1fr;
                margin-bottom: 48px;
            }
        }
    }
}