/*!
Copyright (c) 2012 Google Inc. (opensource@google.com).
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL
*/
/*!
YakuHanJP
OFL-1.1 AND MIT
-----------------
SIL Open Font License version 1.1
Copyright Qrac
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------
MIT License
Copyright Qrac
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/*!
Copyright 2020 The Yomogi Project Authors (https://github.com/satsuyako/YomogiFont), all rights reserved.

This Font Software is licensed under the SIL Open Font License,
Version 1.1.

This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
.bg_gradient {
    display: block;
    z-index: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0.8) 100%);
    content: ""
}

.campaign-wrapper .details-list .step,
.campaign-wrapper .details-list .btn div,
.campaign-wrapper__review-title,
.campaign-wrapper__review-inner .list-item div,
.campaign-wrapper__terms .title,
.product-wrapper__contents-information .details-title,
.product-wrapper__contents-information .details-btn div,
.product-wrapper__contents-presents,
.notice-wrapper__date,
.notice-wrapper__list-item .text span,
.notice-wrapper__list-item .btn div,
.notice-wrapper__addendum-text,
.notice-wrapper__addendum .btn div,
.epilogue-wrapper__contents .btn div,
.prologue-wrapper__contents .btn div,
.chara-wrapper__contents__text .name,
.chara-wrapper__contents__change-btn a div,
.world-wrapper__text h3,
.heading-wrapper__title,
.kv-front__btn a div,
.kv-front__modal-btn a div {
    font-family: YakuHanJP, "Noto Serif JP", sans-serif
}

body.c-modal-fixed {
    width: 100%;
    position: fixed;
    top: auto;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box
}

.c-modal {
    position: fixed;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 9999;
    display: none
}

.c-modal-open-anime {
    display: block;
    animation: c-modal-open .3s ease-out 0s 1 forwards
}

.c-modal-close-anime {
    animation: c-modal-close .3s ease-out 0s 1 forwards
}

.c-modal__body {
    display: table;
    width: 100%;
    height: 100%
}

.c-modal__main {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

.c-modal__contents {
    position: relative;
    display: inline-block;
    text-align: left;
    z-index: 1
}

.c-modal__contents__wrap {
    text-align: center
}

.c-modal__contents .c-modal-movie {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0
}

.c-modal__contents .c-modal-movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-modal__contents .c-modal-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.c-modal__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8)
}

@keyframes c-modal-open {
    0% {
        opacity: 0
    }

    99.9%,
    to {
        opacity: 1
    }
}

@keyframes c-modal-close {
    0% {
        opacity: 1
    }

    99.9%,
    to {
        opacity: 0
    }
}

.nav {
    display: none;
    position: fixed;
    background-image: url(/special/bp-18-special-site/bp18/assets/images/navi_bg.8269c0cd.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    -webkit-clip-path: inset(0 0 100dvh 0);
    clip-path: inset(0 0 100dvh 0);
    pointer-events: none;
    transition: all .3s ease;
    transform: translateZ(0)
}

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

.nav.active {
    display: block;
    transition: all .5s ease;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    pointer-events: auto
}

.nav .menu {
    position: relative;
    max-width: 2000px;
    margin: 0 auto
}

.nav .menu-wrapper__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.nav .menu-wrapper__list-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.nav .menu-wrapper__list-item a {
    display: block
}

.nav .menu-wrapper__list-item a img {
    pointer-events: none
}

.nav .menu-wrapper__list-item:has(.active) img {
    filter: invert(47%) sepia(28%) saturate(6313%) hue-rotate(339deg) brightness(103%) contrast(109%)
}

.nav .menu-wrapper__list-item:has(.active)::before,
.nav .menu-wrapper__list-item:has(.active)::after {
    content: "";
    position: absolute;
    top: 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    transition: all .5s ease-in
}

.nav .menu-wrapper__list-item:has(.active)::before {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/navi_frame_left.cd8ce1e6.svg);
    left: 0
}

.nav .menu-wrapper__list-item:has(.active)::after {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/navi_frame_right.4d29d9a2.svg);
    right: 0
}

.kv {
    position: relative;
    z-index: 3
}

.kv-front {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0
}

.kv-front__title {
    position: absolute
}

.kv-front__btn {
    position: absolute
}

.kv-front__btn._2 a div {
    display: block;
    color: #41c99b
}

.kv-front__btn._2 a::after {
    content: "";
    position: absolute;
    background-size: 100% auto
}

.kv-front__btn a {
    position: relative;
    display: block;
    filter: drop-shadow(0 0 5px rgb(0, 0, 0))
}

.kv-front__btn a div {
    transform: scaleX(75%);
    transform-origin: left;
    position: absolute;
    z-index: 1;
    height: 100%;
    color: #ffc000;
    text-align: center
}

.kv-front__btn a .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.kv-front__modal-btn {
    position: absolute
}

.kv-front__modal-btn a {
    position: relative;
    display: block;
    filter: drop-shadow(0 0 5px rgb(0, 0, 0))
}

.kv-front__modal-btn a div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff
}

.kv-front__modal-btn a .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.kv-back {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%
}

.kv-back__image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-clip-path: polygon(-10% 0, -10% 0, 0 100%, 0 100%);
    clip-path: polygon(-10% 0, -10% 0, 0 100%, 0 100%)
}

.kv-background {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.kv-background img {
    -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 79%, rgba(0, 0, 0, 0) 80%);
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 79%, rgba(0, 0, 0, 0) 80%)
}

.kv.loaded .kv-front {
    opacity: 1;
    transition: opacity .5s ease-in-out .5s
}

.kv.loaded .kv-back__image {
    transition: -webkit-clip-path .5s ease-in-out;
    transition: clip-path .5s ease-in-out;
    transition: clip-path .5s ease-in-out, -webkit-clip-path .5s ease-in-out;
    -webkit-clip-path: polygon(0 0, 100% 0, 110% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 110% 100%, 0 100%)
}

.kv.loaded .kv-background {
    opacity: 1;
    transition: opacity .3s ease-in-out .3s
}

.is-viewed .glitch-image {
    overflow: hidden;
    background-size: 0
}

.is-viewed .glitch-image._1 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img1.9e5bb846.webp)
}

.is-viewed .glitch-image._1 .overlay {
    animation-delay: 844ms
}

.is-viewed .glitch-image._1::before,
.is-viewed .glitch-image._1::after {
    animation-delay: 844ms
}

.is-viewed .glitch-image._2 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img2.26f00ea0.webp)
}

.is-viewed .glitch-image._2 .overlay {
    animation-delay: 603ms
}

.is-viewed .glitch-image._2::before,
.is-viewed .glitch-image._2::after {
    animation-delay: 603ms
}

.is-viewed .glitch-image._3 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img3.a44d801e.webp)
}

.is-viewed .glitch-image._3 .overlay {
    animation-delay: 707ms
}

.is-viewed .glitch-image._3::before,
.is-viewed .glitch-image._3::after {
    animation-delay: 707ms
}

.is-viewed .glitch-image._4 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img4.f8d2f95f.webp)
}

.is-viewed .glitch-image._4 .overlay {
    animation-delay: 252ms
}

.is-viewed .glitch-image._4::before,
.is-viewed .glitch-image._4::after {
    animation-delay: 252ms
}

.is-viewed .glitch-image._5 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img5.b7595989.webp)
}

.is-viewed .glitch-image._5 .overlay {
    animation-delay: 13ms
}

.is-viewed .glitch-image._5::before,
.is-viewed .glitch-image._5::after {
    animation-delay: 13ms
}

.is-viewed .glitch-image._6 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img6.39910b31.webp)
}

.is-viewed .glitch-image._6 .overlay {
    animation-delay: 270ms
}

.is-viewed .glitch-image._6::before,
.is-viewed .glitch-image._6::after {
    animation-delay: 270ms
}

.is-viewed .glitch-image._7 {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/introduction_img7.08d97d0d.webp)
}

.is-viewed .glitch-image._7 .overlay {
    animation-delay: 411ms
}

.is-viewed .glitch-image._7::before,
.is-viewed .glitch-image._7::after {
    animation-delay: 411ms
}

.is-viewed .glitch-image::before,
.is-viewed .glitch-image::after,
.is-viewed .glitch-image .overlay {
    background: inherit;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.is-viewed .glitch-image::before {
    animation: glitch-before 2.3s linear infinite alternate both;
    content: ""
}

@keyframes glitch-before {
    0% {
        -webkit-clip-path: polygon(0% 58.9434584201%, 100% 58.9434584201%, 100% 61.6678188426%, 0% 61.6678188426%);
        clip-path: polygon(0% 58.9434584201%, 100% 58.9434584201%, 100% 61.6678188426%, 0% 61.6678188426%);
        transform: translate(-3.9310801644%, 0.4939594932%)
    }

    2% {
        -webkit-clip-path: polygon(0% 89.1100887345%, 100% 89.1100887345%, 100% 98.9869184757%, 0% 98.9869184757%);
        clip-path: polygon(0% 89.1100887345%, 100% 89.1100887345%, 100% 98.9869184757%, 0% 98.9869184757%);
        transform: translate(-0.434819281%, 0.2742699698%)
    }

    4% {
        -webkit-clip-path: polygon(0% 52.8140061405%, 100% 52.8140061405%, 100% 57.4826331619%, 0% 57.4826331619%);
        clip-path: polygon(0% 52.8140061405%, 100% 52.8140061405%, 100% 57.4826331619%, 0% 57.4826331619%);
        transform: translate(5.4751055984%, 0.4977852407%)
    }

    6% {
        -webkit-clip-path: polygon(0% 22.1734903339%, 100% 22.1734903339%, 100% 26.8395514867%, 0% 26.8395514867%);
        clip-path: polygon(0% 22.1734903339%, 100% 22.1734903339%, 100% 26.8395514867%, 0% 26.8395514867%);
        transform: translate(-0.1739002884%, -0.1537978287%)
    }

    8% {
        -webkit-clip-path: polygon(0% 83.0390215981%, 100% 83.0390215981%, 100% 90.1079015422%, 0% 90.1079015422%);
        clip-path: polygon(0% 83.0390215981%, 100% 83.0390215981%, 100% 90.1079015422%, 0% 90.1079015422%);
        transform: translate(-4.6796866231%, -0.1154520531%)
    }

    10% {
        -webkit-clip-path: polygon(0% 23.1309423384%, 100% 23.1309423384%, 100% 27.6298617369%, 0% 27.6298617369%);
        clip-path: polygon(0% 23.1309423384%, 100% 23.1309423384%, 100% 27.6298617369%, 0% 27.6298617369%);
        transform: translate(-5.0675162327%, -0.4318828154%)
    }

    12% {
        -webkit-clip-path: polygon(0% 9.3489483625%, 100% 9.3489483625%, 100% 15.7644791789%, 0% 15.7644791789%);
        clip-path: polygon(0% 9.3489483625%, 100% 9.3489483625%, 100% 15.7644791789%, 0% 15.7644791789%);
        transform: translate(2.8286841949%, 0.2446782039%)
    }

    14% {
        -webkit-clip-path: polygon(0% 31.5093500739%, 100% 31.5093500739%, 100% 34.7912174916%, 0% 34.7912174916%);
        clip-path: polygon(0% 31.5093500739%, 100% 31.5093500739%, 100% 34.7912174916%, 0% 34.7912174916%);
        transform: translate(-0.196955653%, -0.0970654063%)
    }

    16% {
        -webkit-clip-path: polygon(0% 77.9702043159%, 100% 77.9702043159%, 100% 86.4677729144%, 0% 86.4677729144%);
        clip-path: polygon(0% 77.9702043159%, 100% 77.9702043159%, 100% 86.4677729144%, 0% 86.4677729144%);
        transform: translate(-2.0040219472%, 0.4034534012%)
    }

    18% {
        -webkit-clip-path: polygon(0% 80.6940689969%, 100% 80.6940689969%, 100% 89.469125463%, 0% 89.469125463%);
        clip-path: polygon(0% 80.6940689969%, 100% 80.6940689969%, 100% 89.469125463%, 0% 89.469125463%);
        transform: translate(0.2412047048%, -0.1992620146%)
    }

    20%,
    100% {
        -webkit-clip-path: none;
        clip-path: none;
        transform: none
    }
}

.is-viewed .glitch-image::after {
    animation: glitch-after 2.3s linear infinite alternate both;
    content: ""
}

@keyframes glitch-after {
    0% {
        -webkit-clip-path: polygon(0% 28.1904574039%, 100% 28.1904574039%, 100% 35.4003593773%, 0% 35.4003593773%);
        clip-path: polygon(0% 28.1904574039%, 100% 28.1904574039%, 100% 35.4003593773%, 0% 35.4003593773%);
        transform: translate(7.171516554%, 0.151522743%)
    }

    2% {
        -webkit-clip-path: polygon(0% 15.2440505868%, 100% 15.2440505868%, 100% 20.3879465381%, 0% 20.3879465381%);
        clip-path: polygon(0% 15.2440505868%, 100% 15.2440505868%, 100% 20.3879465381%, 0% 20.3879465381%);
        transform: translate(-0.546476053%, -0.0590440694%)
    }

    4% {
        -webkit-clip-path: polygon(0% 15.3104693334%, 100% 15.3104693334%, 100% 20.9430829467%, 0% 20.9430829467%);
        clip-path: polygon(0% 15.3104693334%, 100% 15.3104693334%, 100% 20.9430829467%, 0% 20.9430829467%);
        transform: translate(2.4774552578%, -0.1774459523%)
    }

    6% {
        -webkit-clip-path: polygon(0% 17.3074661401%, 100% 17.3074661401%, 100% 20.8309421782%, 0% 20.8309421782%);
        clip-path: polygon(0% 17.3074661401%, 100% 17.3074661401%, 100% 20.8309421782%, 0% 20.8309421782%);
        transform: translate(-6.4834681843%, 0.3783572611%)
    }

    8% {
        -webkit-clip-path: polygon(0% 81.6177863928%, 100% 81.6177863928%, 100% 89.040561982%, 0% 89.040561982%);
        clip-path: polygon(0% 81.6177863928%, 100% 81.6177863928%, 100% 89.040561982%, 0% 89.040561982%);
        transform: translate(0.0197865872%, 0.0934148585%)
    }

    10% {
        -webkit-clip-path: polygon(0% 30.2429071798%, 100% 30.2429071798%, 100% 38.396181641%, 0% 38.396181641%);
        clip-path: polygon(0% 30.2429071798%, 100% 30.2429071798%, 100% 38.396181641%, 0% 38.396181641%);
        transform: translate(-2.5786594468%, -0.2995412729%)
    }

    12% {
        -webkit-clip-path: polygon(0% 55.8863351679%, 100% 55.8863351679%, 100% 61.3049792759%, 0% 61.3049792759%);
        clip-path: polygon(0% 55.8863351679%, 100% 55.8863351679%, 100% 61.3049792759%, 0% 61.3049792759%);
        transform: translate(7.1481915789%, 0.0676074171%)
    }

    14% {
        -webkit-clip-path: polygon(0% 46.4274384086%, 100% 46.4274384086%, 100% 48.7800101107%, 0% 48.7800101107%);
        clip-path: polygon(0% 46.4274384086%, 100% 46.4274384086%, 100% 48.7800101107%, 0% 48.7800101107%);
        transform: translate(-7.5947310622%, 0.198923537%)
    }

    16% {
        -webkit-clip-path: polygon(0% 39.58217131%, 100% 39.58217131%, 100% 48.6981604334%, 0% 48.6981604334%);
        clip-path: polygon(0% 39.58217131%, 100% 39.58217131%, 100% 48.6981604334%, 0% 48.6981604334%);
        transform: translate(-3.7006858399%, 0.2716223484%)
    }

    18% {
        -webkit-clip-path: polygon(0% 5.9369255544%, 100% 5.9369255544%, 100% 12.1892951075%, 0% 12.1892951075%);
        clip-path: polygon(0% 5.9369255544%, 100% 5.9369255544%, 100% 12.1892951075%, 0% 12.1892951075%);
        transform: translate(-2.8155005614%, -0.1111814212%)
    }

    20%,
    100% {
        -webkit-clip-path: none;
        clip-path: none;
        transform: none
    }
}

.is-viewed .glitch-image .overlay {
    mix-blend-mode: screen
}

.is-viewed .glitch-image .overlay::before {
    bottom: 0;
    content: "";
    display: block;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.is-viewed .glitch-image .r {
    animation: rgb-moving-r 2.3s steps(1, jump-end) infinite alternate both
}

@keyframes rgb-moving-r {
    0% {
        transform: translate(-1.7431132012%, -0.3887522309%)
    }

    2% {
        transform: translate(1.1058043443%, -0.3393683491%)
    }

    4% {
        transform: translate(-1.8906269499%, -0.0016766336%)
    }

    6% {
        transform: translate(-0.1702258775%, -0.0371178999%)
    }

    8% {
        transform: translate(1.6432332589%, -0.3032018332%)
    }

    10% {
        transform: translate(0.7390439287%, -0.4987899524%)
    }

    12% {
        transform: translate(1.0840332106%, 0.376272219%)
    }

    14% {
        transform: translate(-1.9660820233%, 0.1301930264%)
    }

    16% {
        transform: translate(-0.5073800143%, -0.4091180667%)
    }

    18% {
        transform: translate(0.4149312122%, 0.4545084804%)
    }

    20%,
    100% {
        transform: none
    }
}

.is-viewed .glitch-image .r::before {
    background: #900
}

.is-viewed .glitch-image .g {
    animation: rgb-moving-g 2.3s steps(1, jump-end) infinite alternate both
}

@keyframes rgb-moving-g {
    0% {
        transform: translate(0.8545219162%, 0.3319174979%)
    }

    2% {
        transform: translate(-1.7597563618%, 0.0973892526%)
    }

    4% {
        transform: translate(0.1785855831%, 0.3574150545%)
    }

    6% {
        transform: translate(-1.5103352978%, 0.0053689803%)
    }

    8% {
        transform: translate(0.3252511227%, -0.0731284056%)
    }

    10% {
        transform: translate(1.6257996887%, 0.4776676293%)
    }

    12% {
        transform: translate(-0.8010571618%, -0.2494059844%)
    }

    14% {
        transform: translate(-0.5644887252%, -0.0449701028%)
    }

    16% {
        transform: translate(1.4887680726%, 0.4996403851%)
    }

    18% {
        transform: translate(-0.4963215579%, 0.1374252126%)
    }

    20%,
    100% {
        transform: none
    }
}

.is-viewed .glitch-image .g::before {
    background: #090
}

.is-viewed .glitch-image .b {
    animation: rgb-moving-b 2.3s steps(1, jump-end) infinite alternate both
}

@keyframes rgb-moving-b {
    0% {
        transform: translate(-1.5487646514%, -0.3836068808%)
    }

    2% {
        transform: translate(-1.2038086879%, -0.0913623238%)
    }

    4% {
        transform: translate(-1.5972894362%, -0.2636050815%)
    }

    6% {
        transform: translate(0.3456061843%, -0.289912388%)
    }

    8% {
        transform: translate(-0.5912408941%, 0.3524622572%)
    }

    10% {
        transform: translate(-0.9728308885%, 0.3961169118%)
    }

    12% {
        transform: translate(0.9698524974%, -0.2592738388%)
    }

    14% {
        transform: translate(-1.1958614871%, 0.4945055173%)
    }

    16% {
        transform: translate(-1.5674210371%, 0.2598704285%)
    }

    18% {
        transform: translate(1.333674454%, -0.0881406671%)
    }

    20%,
    100% {
        transform: none
    }
}

.is-viewed .glitch-image .b::before {
    background: #009
}

.heading {
    position: relative;
    width: 100vw
}

.heading-background {
    position: absolute
}

.heading.wait-anime .heading-wrapper__text2 .glitch-text::before,
.heading.wait-anime .heading-wrapper__text2 .glitch-text::after {
    transition: opacity .5s ease-in-out .5s;
    opacity: 0
}

.heading.wait-anime.is-viewed .heading-wrapper__text2 .glitch-text::before,
.heading.wait-anime.is-viewed .heading-wrapper__text2 .glitch-text::after {
    opacity: 1
}

.heading-wrapper__title,
.heading-wrapper__text1,
.heading-wrapper__text2 {
    position: absolute
}

.heading-wrapper__title {
    transform-origin: center;
    color: #fff
}

.heading-wrapper__text1 .glitch-text {
    text-align: center
}

.heading-wrapper__text2 .glitch-text::before,
.heading-wrapper__text2 .glitch-text::after {
    content: "";
    position: absolute;
    background: #fff
}

.heading._back {
    width: 100%;
    background: #161616
}

.heading._back .image {
    position: absolute
}

.heading.wait-anime .heading-wrapper .image {
    opacity: 0
}

.heading.wait-anime .heading-wrapper .image:nth-child(1) {
    transition: .5s opacity ease-in-out 0.1s
}

.heading.wait-anime .heading-wrapper .image:nth-child(2) {
    transition: .5s opacity ease-in-out 0.2s
}

.heading.wait-anime .heading-wrapper .image:nth-child(3) {
    transition: .5s opacity ease-in-out 0.3s
}

.heading.wait-anime .heading-wrapper .image:nth-child(4) {
    transition: .5s opacity ease-in-out 0.4s
}

.heading.wait-anime .heading-wrapper .image:nth-child(5) {
    transition: .5s opacity ease-in-out 0.5s
}

.heading.wait-anime .heading-wrapper .image:nth-child(6) {
    transition: .5s opacity ease-in-out 0.6s
}

.heading.wait-anime .heading-wrapper .image:nth-child(7) {
    transition: .5s opacity ease-in-out 0.7s
}

.heading.wait-anime.is-viewed .heading-wrapper .image {
    opacity: 1
}

.world {
    position: relative;
    width: 100vw
}

.world-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.world-wrapper__heading {
    position: absolute
}

.world-wrapper__text {
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, .7)
}

.world-wrapper__text h3 {
    color: #fff
}

.world-wrapper__text .text {
    color: #fff
}

.world._back {
    background-repeat: no-repeat;
    background-size: 100%
}

.world._back::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    animation: world-bg 5s ease-in-out infinite
}

@keyframes world-bg {
    0% {
        opacity: .2
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: .2
    }
}

.chara {
    position: relative;
    width: 100vw
}

.chara-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.chara-wrapper__heading {
    position: absolute
}

.chara-wrapper__heading .glitch-text {
    text-align: right
}

.chara-wrapper__contents {
    opacity: 0;
    transition: opacity .3s ease-in
}

.chara-wrapper__contents.active {
    transition: opacity 1s ease-in .3s;
    opacity: 1
}

.chara-wrapper__contents__text {
    position: absolute;
    z-index: 2;
    color: #fff;
    background-color: rgba(0, 0, 0, .7);
    -webkit-clip-path: polygon(var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6), var(--p7), var(--p8));
    clip-path: polygon(var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6), var(--p7), var(--p8))
}

.chara-wrapper__contents__text .catch {
    font-weight: bold;
    transform: scaleX(80%);
    transform-origin: left;
    white-space: nowrap
}

.chara-wrapper__contents__text .name {
    transform: scaleX(80%);
    transform-origin: left;
    white-space: nowrap
}

.chara-wrapper__contents__text .description {
    white-space: nowrap
}

.chara-wrapper__contents__change-btn {
    position: absolute;
    z-index: 1
}

.chara-wrapper__contents__change-btn a {
    display: block;
    position: relative
}

.chara-wrapper__contents__change-btn a * {
    pointer-events: none
}

.chara-wrapper__contents__change-btn a div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #ffc000
}

.chara-wrapper__contents__change-btn a .text._normal {
    display: flex
}

.chara-wrapper__contents__change-btn a .text._evo {
    display: none
}

.chara-wrapper__contents__change-btn a .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.chara-wrapper__contents__change-btn a.active .text {
    color: #ff2a00
}

.chara-wrapper__contents__change-btn a.active .text._normal {
    display: none
}

.chara-wrapper__contents__change-btn a.active .text._evo {
    display: flex
}

.chara-wrapper__contents__change-btn a.active .hover {
    opacity: 1
}

.chara-wrapper__contents__change-btn a.active::before,
.chara-wrapper__contents__change-btn a.active::after {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_evolve_btn_arw_right_on.049e951d.svg)
}

.chara-wrapper__contents__change-btn a.active::before {
    transform: scaleX(1);
    opacity: 1
}

.chara-wrapper__contents__change-btn a.active::after {
    transform: scaleX(-1);
    opacity: 1
}

.chara-wrapper__contents__change-btn a::before,
.chara-wrapper__contents__change-btn a::after {
    content: "";
    position: absolute;
    background-size: 100% 100%;
    background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_normal_btn_arw_left_off.1d0decdd.svg)
}

.chara-wrapper__contents__change-btn a::before {
    transform: scaleX(-1)
}

.chara-wrapper__contents__change-btn a::after {
    opacity: .5
}

.chara-wrapper__contents__photo {
    position: absolute
}

.chara-wrapper__contents__photo .photo {
    position: absolute;
    filter: drop-shadow(0 0 5px rgb(0, 0, 0))
}

.chara-wrapper__contents__photo .photo._normal {
    z-index: 1;
    transform: rotate(5deg);
    left: 0;
    animation: normalAnimeNormal .35s ease-in-out reverse forwards
}

.chara-wrapper__contents__photo .photo._evo {
    z-index: 0;
    transform: rotate(-7deg);
    animation: evoAnimeNormal .35s ease-in-out reverse forwards
}

@keyframes normalAnimeNormal {
    0% {
        left: 0
    }

    50% {
        left: var(--evo-right);
        z-index: 0
    }

    100% {
        left: 0;
        z-index: 0
    }
}

@keyframes evoAnimeNormal {
    0% {
        left: var(--home-left)
    }

    50% {
        left: var(--evo-left);
        z-index: 1
    }

    100% {
        left: var(--home-left);
        z-index: 1
    }
}

.chara-wrapper__contents__photo._evo ._normal {
    animation: normalAnimeEvo .35s ease-in-out forwards
}

.chara-wrapper__contents__photo._evo ._evo {
    animation: evoAnimeEvo .35s ease-in-out forwards
}

@keyframes normalAnimeEvo {
    0% {
        left: 0
    }

    50% {
        left: var(--evo-right);
        z-index: 0
    }

    100% {
        left: 0;
        z-index: 0
    }
}

@keyframes evoAnimeEvo {
    0% {
        left: var(--home-left)
    }

    50% {
        left: var(--evo-left);
        z-index: 1
    }

    100% {
        left: var(--home-left);
        z-index: 1
    }
}

.chara-wrapper__btns {
    position: absolute;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.chara-wrapper__btns a {
    position: relative
}

.chara-wrapper__btns a .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.chara-wrapper__btns a.active {
    pointer-events: none
}

.chara-wrapper__btns a.active .hover {
    opacity: 1
}

.chara._back {
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s ease-in;
    opacity: 0
}

.chara._back._1 {
    opacity: 1
}

.chara._back._2 {
    opacity: 1
}

.chara._back._3 {
    opacity: 1
}

.chara._back._4 {
    opacity: 1
}

.chara._back._5 {
    opacity: 1
}

.chara._back._6 {
    opacity: 1
}

.chara.wait-anime .chara-wrapper__btns button {
    opacity: 0
}

.chara.wait-anime .chara-wrapper__btns button:nth-child(1) {
    transition: .5s opacity ease-in-out 0.1s
}

.chara.wait-anime .chara-wrapper__btns button:nth-child(2) {
    transition: .5s opacity ease-in-out 0.2s
}

.chara.wait-anime .chara-wrapper__btns button:nth-child(3) {
    transition: .5s opacity ease-in-out 0.3s
}

.chara.wait-anime .chara-wrapper__btns button:nth-child(4) {
    transition: .5s opacity ease-in-out 0.4s
}

.chara.wait-anime .chara-wrapper__btns button:nth-child(5) {
    transition: .5s opacity ease-in-out 0.5s
}

.chara.wait-anime .chara-wrapper__btns button:nth-child(6) {
    transition: .5s opacity ease-in-out 0.6s
}

.chara.wait-anime.is-viewed .chara-wrapper__btns button {
    opacity: 1
}

.prologue {
    position: relative;
    width: 100vw
}

.prologue-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.prologue-wrapper__heading {
    position: absolute
}

.prologue-wrapper__heading .glitch-text {
    text-align: right
}

.prologue-wrapper__contents {
    position: absolute
}

.prologue-wrapper__contents-text p {
    font-family: YakuHanJp, "Noto Sans JP", sans-serif;
    color: #fff;
    text-shadow: 1px 0 10px #000
}

.prologue-wrapper__contents .btn {
    position: relative;
    display: block
}

.prologue-wrapper__contents .btn div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #ffc000
}

.prologue-wrapper__contents .btn .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.prologue._back {
    background-repeat: no-repeat;
    background-size: 100%
}

.prologue._back::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    animation: prologue-bg 10s ease-in-out infinite
}

@keyframes prologue-bg {
    0% {
        opacity: 0
    }

    25% {
        opacity: .25
    }

    50% {
        opacity: .15
    }

    70% {
        opacity: .2
    }

    to {
        opacity: 0
    }
}

.epilogue {
    position: relative;
    width: 100vw
}

.epilogue-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.epilogue-wrapper__heading {
    position: absolute
}

.epilogue-wrapper__heading .glitch-text {
    text-align: right
}

.epilogue-wrapper__contents {
    position: absolute
}

.epilogue-wrapper__contents-text p {
    font-family: YakuHanJp, "Noto Sans JP", sans-serif;
    color: #fff;
    text-shadow: 1px 0 10px #000
}

.epilogue-wrapper__contents .btn {
    position: relative;
    display: block
}

.epilogue-wrapper__contents .btn div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #ffc000
}

.epilogue-wrapper__contents .btn .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.epilogue._back {
    background-repeat: no-repeat;
    background-size: 100%
}

.epilogue._back::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    animation: prologue-bg 10s ease-in-out infinite
}

@keyframes prologue-bg {
    0% {
        opacity: 0
    }

    25% {
        opacity: .25
    }

    50% {
        opacity: .15
    }

    70% {
        opacity: .2
    }

    to {
        opacity: 0
    }
}

.notice {
    position: relative;
    width: 100vw
}

.notice-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.notice-wrapper__heading {
    position: absolute
}

.notice-wrapper__date {
    position: absolute;
    transform: scaleX(80%);
    color: #fff;
    white-space: nowrap;
    text-shadow: 1px 0 10px #000, 1px 0 10px #000, 1px 0 10px #000, 1px 0 10px #000
}

.notice-wrapper__date .title {
    text-align: center
}

.notice-wrapper__date .date {
    font-weight: bold;
    width: 100%;
    text-align: center
}

.notice-wrapper__list-item {
    position: relative
}

.notice-wrapper__list-item .text {
    position: absolute;
    text-align: center;
    font-weight: 500
}

.notice-wrapper__list-item .text span {
    display: inline-block;
    color: #fff;
    white-space: nowrap;
    transform: scaleX(80%);
    transform-origin: center;
    text-shadow: 1px 0 10px #000, 1px 0 10px #000, 1px 0 10px #000, 1px 0 10px #000
}

.notice-wrapper__list-item .btn {
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%)
}

.notice-wrapper__list-item .btn div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #ffc000
}

.notice-wrapper__list-item .btn .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.notice-wrapper__addendum {
    position: relative
}

.notice-wrapper__addendum-heading {
    position: absolute;
    display: inline-block
}

.notice-wrapper__addendum-text {
    position: absolute;
    transform: scaleX(80%);
    transform-origin: left;
    color: #fff;
    text-shadow: 0 0 8px #000, 0 0 8px #000
}

.notice-wrapper__addendum .btn {
    position: absolute;
    display: block
}

.notice-wrapper__addendum .btn div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #ffc000
}

.notice-wrapper__addendum .btn div .no-yakuhan {
    font-family: "Noto Serif JP", serif
}

.notice-wrapper__addendum .btn .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.notice._back {
    position: relative;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: 100%
}

.notice._back .notice-inner {
    display: flex
}

.notice._back .notice-inner__image {
    position: relative;
    display: block
}

.notice._back .notice-inner__image._hover {
    background: #e6d8b3
}

.notice._back .notice-inner__image._hover .hover {
    opacity: 1
}

.notice._back .notice-inner__image._hover .hover .overlay.r {
    animation: rgb-moving-r 2.3s steps(1, jump-end) infinite
}

.notice._back .notice-inner__image._hover .hover .overlay.g {
    animation: rgb-moving-g 2.3s steps(1, jump-end) infinite
}

.notice._back .notice-inner__image._hover .hover .overlay.b {
    animation: rgb-moving-b 2.3s steps(1, jump-end) infinite
}

.notice._back .notice-inner__image._hover .hover::before {
    animation: glitch-before 2.3s linear infinite alternate both
}

.notice._back .notice-inner__image._hover .hover::after {
    animation: glitch-after 2.3s linear infinite alternate both
}

.notice._back .notice-inner__image .hover {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto
}

.notice._back .notice-inner__image .hover::before,
.notice._back .notice-inner__image .hover::after {
    animation: none
}

.notice._back .notice-inner__addendum {
    position: relative
}

.notice._back .notice-inner__addendum._hover .hover {
    opacity: .5
}

.notice._back .notice-inner__addendum._hover .hover .overlay.r {
    animation: rgb-moving-r 2.3s steps(1, jump-end) infinite
}

.notice._back .notice-inner__addendum._hover .hover .overlay.g {
    animation: rgb-moving-g 2.3s steps(1, jump-end) infinite
}

.notice._back .notice-inner__addendum._hover .hover .overlay.b {
    animation: rgb-moving-b 2.3s steps(1, jump-end) infinite
}

.notice._back .notice-inner__addendum._hover .hover::before {
    animation: glitch-before 2.3s linear infinite alternate both
}

.notice._back .notice-inner__addendum._hover .hover::after {
    animation: glitch-after 2.3s linear infinite alternate both
}

.notice._back .notice-inner__addendum .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-size: 100% auto;
    height: 100%;
    width: 100%
}

.notice._back .notice-inner__addendum .hover .overlay {
    animation: none
}

.notice._back .notice-inner__addendum .hover :before,
.notice._back .notice-inner__addendum .hover::after {
    animation: none
}

.notice._back .notice-inner__image:nth-child(1) .hover {
    background-size: 100% auto
}

.notice._back .notice-inner__image:nth-child(1) .hover .overlay {
    animation: none
}

.notice._back .notice-inner__image:nth-child(2) .hover {
    background-size: 100% auto
}

.notice._back .notice-inner__image:nth-child(2) .hover .overlay {
    animation: none
}

.notice._back .notice-inner__image:nth-child(3) .hover {
    background-size: 100% auto
}

.notice._back .notice-inner__image:nth-child(3) .hover .overlay {
    animation: none
}

.notice._back .notice-inner__image:nth-child(4) .hover {
    background-size: 100% auto
}

.notice._back .notice-inner__image:nth-child(4) .hover .overlay {
    animation: none
}

.notice._back .notice-inner__image:nth-child(5) .hover {
    background-size: 100% auto
}

.notice._back .notice-inner__image:nth-child(5) .hover .overlay {
    animation: none
}

.notice._back .notice-inner__image:nth-child(6) .hover {
    background-size: 100% auto
}

.notice._back .notice-inner__image:nth-child(6) .hover .overlay {
    animation: none
}

.report {
    position: relative;
    width: 100vw
}

.report-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.report-wrapper__heading {
    position: absolute
}

.report-wrapper__btns {
    position: absolute;
    display: flex;
    justify-content: space-between
}

.report-wrapper__btns a {
    display: block;
    position: relative;
    filter: drop-shadow(0 0 5px rgb(0, 0, 0))
}

.report-wrapper__btns a .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.report._back {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: 100%
}

.report._back::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    animation: report-bg 15s linear infinite
}

@keyframes report-bg {
    0% {
        opacity: .3
    }

    2% {
        opacity: .24
    }

    4% {
        opacity: .3
    }

    6% {
        opacity: .24
    }

    8% {
        opacity: .3
    }

    10% {
        opacity: .24
    }

    12% {
        opacity: .3
    }

    14% {
        opacity: .24
    }

    16% {
        opacity: .3
    }

    18% {
        opacity: .24
    }

    20% {
        opacity: .3
    }

    22% {
        opacity: .24
    }

    24% {
        opacity: .3
    }

    26% {
        opacity: .24
    }

    28% {
        opacity: .3
    }

    30% {
        opacity: .24
    }

    32% {
        opacity: .3
    }

    34% {
        opacity: .24
    }

    36% {
        opacity: .3
    }

    38% {
        opacity: .24
    }

    40% {
        opacity: .3
    }

    42% {
        opacity: .24
    }

    44% {
        opacity: .3
    }

    46% {
        opacity: .24
    }

    48% {
        opacity: .3
    }

    50% {
        opacity: .24
    }

    52% {
        opacity: .3
    }

    54% {
        opacity: .24
    }

    56% {
        opacity: .3
    }

    58% {
        opacity: .24
    }

    60% {
        opacity: .3
    }

    62% {
        opacity: .24
    }

    64% {
        opacity: .3
    }

    66% {
        opacity: .24
    }

    68% {
        opacity: .3
    }

    70% {
        opacity: .24
    }

    72% {
        opacity: .3
    }

    74% {
        opacity: .24
    }

    76% {
        opacity: .3
    }

    78% {
        opacity: .24
    }

    80% {
        opacity: .3
    }

    82% {
        opacity: .24
    }

    84% {
        opacity: .3
    }

    86% {
        opacity: .24
    }

    88% {
        opacity: .3
    }

    90% {
        opacity: .24
    }

    92% {
        opacity: .3
    }

    94% {
        opacity: .24
    }

    96% {
        opacity: .3
    }

    98% {
        opacity: .24
    }

    100% {
        opacity: .3
    }
}

.report.wait-anime .report-wrapper__btns a {
    opacity: 0
}

.report.wait-anime .report-wrapper__btns a:nth-child(1) {
    transition: .5s opacity ease-in-out 0.1s
}

.report.wait-anime .report-wrapper__btns a:nth-child(2) {
    transition: .5s opacity ease-in-out 0.2s
}

.report.wait-anime .report-wrapper__btns a:nth-child(3) {
    transition: .5s opacity ease-in-out 0.3s
}

.report.wait-anime .report-wrapper__btns a:nth-child(4) {
    transition: .5s opacity ease-in-out 0.4s
}

.report.wait-anime .report-wrapper__btns a:nth-child(5) {
    transition: .5s opacity ease-in-out 0.5s
}

.report.wait-anime .report-wrapper__btns a:nth-child(6) {
    transition: .5s opacity ease-in-out 0.6s
}

.report.wait-anime.is-viewed .report-wrapper__btns a {
    opacity: 1
}

.product {
    position: relative;
    width: 100vw
}

.product-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.product-wrapper__heading {
    position: absolute
}

.product-wrapper__heading .glitch-text {
    transform-origin: center
}

.product-wrapper__contents {
    position: relative;
    background-color: rgba(0, 0, 0, .7)
}

.product-wrapper__contents .hr {
    border-bottom: 1px solid #c12c88
}

.product-wrapper__contents-information {
    display: flex;
    justify-content: flex-start
}

.product-wrapper__contents-information .details {
    position: relative;
    color: #fff
}

.product-wrapper__contents-information .details-title {
    position: relative;
    display: inline-block
}

.product-wrapper__contents-information .details-item {
    display: flex
}

.product-wrapper__contents-information .details-item__title {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c12c88
}

.product-wrapper__contents-information .details-item__text {
    display: flex;
    align-items: center;
    justify-content: center
}

.product-wrapper__contents-information .details-btn {
    position: relative;
    display: block
}

.product-wrapper__contents-information .details-btn a {
    display: block
}

.product-wrapper__contents-information .details-btn div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff
}

.product-wrapper__contents-information .details-btn .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.product-wrapper__contents-presents {
    text-align: center;
    color: #fff
}

.product-wrapper__contents-presents .title {
    font-feature-settings: "palt"
}

.product-wrapper__contents-presents .attention {
    font-family: YakuHanJP, "Noto Sans JP", sans-serif
}

.product-wrapper__contents-presents .attention-mark {
    text-align: left
}

.product-wrapper__contents-presents .attention-mark span {
    position: relative
}

.product-wrapper__contents-presents .attention-mark span::before {
    content: "※";
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    left: -1em
}

.product-wrapper__contents::before {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(189, 55, 142, .8)
}

.campaign {
    position: relative;
    width: 100vw
}

.campaign-wrapper {
    position: relative;
    width: 100%;
    --theame-color: #3784a4;
    --theame-color-code: rgb(73 223 255 / 0.5)
}

.campaign-wrapper._green {
    --theame-color: #37a47f;
    --theame-color-code: rgb(55 164 127 / 0.5)
}

.campaign-wrapper__heading {
    position: absolute
}

.campaign-wrapper__heading .glitch-text {
    transform-origin: center;
    text-align: center
}

.campaign-wrapper__contents {
    position: relative
}

.campaign-wrapper__date {
    text-align: center
}

.campaign-wrapper__date-inner {
    background-color: var(--theame-color);
    color: #fff;
    display: inline-block
}

.campaign-wrapper__date span {
    position: relative
}

.campaign-wrapper__date span::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 1.2em;
    background-color: #fff;
    right: 0
}

.campaign-wrapper__end-text {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-align: center;
    background-color: rgba(20, 48, 89, .8);
    color: #fff;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%)
}

.campaign-wrapper .details {
    display: flex;
    justify-content: space-between
}

.campaign-wrapper .details-list {
    position: relative;
    background-color: rgba(0, 0, 0, .7)
}

.campaign-wrapper .details-list .step {
    position: absolute;
    transform: scaleX(80%);
    color: #fff
}

.campaign-wrapper .details-list .description {
    position: relative;
    z-index: 1;
    color: #fff;
    font-feature-settings: "palt";
    white-space: nowrap
}

.campaign-wrapper .details-list .description .blue {
    display: inline;
    color: var(--theame-color);
    transform: scale(95%);
    transform-origin: left;
    font-weight: bold
}

.campaign-wrapper .details-list .image {
    z-index: 0
}

.campaign-wrapper .details-list .btn {
    position: absolute;
    display: block
}

.campaign-wrapper .details-list .btn a {
    display: block
}

.campaign-wrapper .details-list .btn div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff
}

.campaign-wrapper .details-list .btn .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.campaign-wrapper .details-list::before {
    content: "";
    display: block;
    position: absolute;
    background-color: var(--theame-color-code);
    height: var(--height);
    width: 100%;
    top: calc(var(--height)*-1)
}

.campaign-wrapper__review {
    position: relative
}

.campaign-wrapper__review-title {
    position: absolute;
    transform: scaleX(80%);
    color: #fff
}

.campaign-wrapper__review-inner {
    background-color: rgba(0, 0, 0, .7)
}

.campaign-wrapper__review-inner .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.campaign-wrapper__review-inner .list-item {
    position: relative;
    display: block
}

.campaign-wrapper__review-inner .list-item a {
    display: block
}

.campaign-wrapper__review-inner .list-item div {
    transform: scaleX(80%);
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff
}

.campaign-wrapper__review-inner .list-item .hover {
    position: absolute;
    top: 0;
    opacity: 0
}

.campaign-wrapper__review-inner .attention {
    color: #fff;
    text-align: center
}

.campaign-wrapper__review::before {
    content: "";
    display: block;
    position: absolute;
    background-color: var(--theame-color-code);
    height: var(--height);
    width: 100%;
    top: calc(var(--height)*-1)
}

.campaign-wrapper__terms {
    color: #fff
}

.campaign-wrapper__terms .title {
    transform: scaleX(80%);
    text-align: center
}

.campaign-wrapper__terms .terms-inner {
    margin: 0 auto;
    background-color: rgba(0, 0, 0, .7)
}

.campaign-wrapper__terms .terms-inner__text {
    overflow-y: auto;
    scrollbar-color: var(--theame-color) #143059;
    scrollbar-width: thin
}

.campaign-wrapper__terms .terms-inner__text::-webkit-scrollbar {
    background: #143059
}

.campaign-wrapper__terms .terms-inner__text::-webkit-scrollbar-thumb {
    background-color: var(--theame-color)
}

.camera {
    height: 100%
}

.camera-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: .5
}

.camera-wrapper__frame::before,
.camera-wrapper__frame::after {
    content: "";
    position: absolute;
    background-size: 100% auto;
    background-repeat: no-repeat
}

.camera-wrapper__frame._upper::before {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/frame_top_left.c94f974f.svg)
}

.camera-wrapper__frame._upper::after {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/frame_top_right.38fb0b93.svg)
}

.camera-wrapper__frame._bottom::before {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/frame_btm_left.13265aeb.svg)
}

.camera-wrapper__frame._bottom::after {
    background-image: url(/special/bp-18-special-site/bp18/assets/images/frame_btm_right.83c5f89b.svg)
}

.camera-wrapper__meter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: 100% 100%
}

.camera-wrapper__meter-point {
    position: absolute;
    background-size: 100% auto;
    top: 0;
    transition: top .6s ease-in-out
}

.camera-wrapper__battery {
    position: absolute;
    background-image: url(/special/bp-18-special-site/bp18/assets/images/battery.81eb914e.svg);
    background-size: 100% auto;
    background-repeat: no-repeat
}

.camera-wrapper__size {
    font-family: YakkuHanJP, "Noto Sans JP", sans-serif;
    font-weight: bold;
    position: absolute;
    color: #fff;
    transform: scaleX(80%)
}

.camera-frame {
    position: -webkit-sticky;
    position: sticky;
    pointer-events: none;
    z-index: 3;
    width: 100%
}

.js-baffle {
    transition: .3s opacity ease-in;
    opacity: 0
}

.js-baffle.is-viewed {
    opacity: 1
}

.main-contents._front {
    position: relative;
    z-index: 2
}

.main-contents._front ._sticky {
    position: relative
}

.main-contents._back {
    position: absolute;
    z-index: 0;
    top: 0;
    width: 100%
}

.main-maskbg {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    mix-blend-mode: overlay;
    transform: translateZ(0)
}

.others {
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: background-image .5s ease-in
}

.others::before {
    content: "";
    position: -webkit-sticky;
    position: sticky;
    display: block;
    width: 100%;
    height: 100dvh;
    top: 0;
    mix-blend-mode: overlay
}

#c-modal .c-modal__contents__close {
    position: absolute;
    display: block;
    cursor: pointer;
    transition: .5s filter, .3s opacity;
    opacity: 1
}

#c-modal .c-modal__contents__close span {
    position: absolute;
    background-color: #fcc000;
    transition: opacity .3s, top .3s ease, right .3s ease, transition .3s ease;
    transform-origin: center;
    top: 50%;
    left: 50%;
    height: 2px
}

#c-modal .c-modal__contents__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg)
}

#c-modal .c-modal__contents__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.wait-anime {
    opacity: 0;
    transition: .3s opacity ease-in
}

.wait-anime.is-viewed {
    opacity: 1
}

.loading-img {
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
    background-image: url(/special/bp-18-special-site/bp18/assets/images/campaign_bg.376dc67a.webp), url(/special/bp-18-special-site/bp18/assets/images/campaign_bg.ed36c1ad.webp), url(/special/bp-18-special-site/bp18/assets/images/product_bg.a8ea1800.webp), url(/special/bp-18-special-site/bp18/assets/images/product_bg.84a6503d.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg2.35f0177d.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg3.280813f2.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg4.314f5391.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg5.189c64b0.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg6.346ad31c.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg2.4633a846.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg3.37d597d6.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg4.95959937.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg5.a7348118.webp), url(/special/bp-18-special-site/bp18/assets/images/chara_bg6.ea5b1ca6.webp)
}

@media (min-width: 768px) {
    .nav .menu {
        top: 60%;
        transform: translateY(-50%)
    }

    .nav .menu-wrapper__list-item a[data-id=world] {
        width: 8.6445625vw;
        height: 1.2734375vw
    }

    .nav .menu-wrapper__list-item a[data-id=chara] {
        width: 4.921875vw;
        height: 1.26953125vw
    }

    .nav .menu-wrapper__list-item a[data-id=report] {
        width: 5.038125vw;
        height: 1.2715vw
    }

    .nav .menu-wrapper__list-item a[data-id=prologue] {
        width: 5.9209375vw;
        height: 1.23240625vw
    }

    .nav .menu-wrapper__list-item a[data-id=notice] {
        width: 5.0271875vw;
        height: 1.2685625vw
    }

    .nav .menu-wrapper__list-item a[data-id=product] {
        width: 5.0009375vw;
        height: 1.2715vw
    }

    .nav .menu-wrapper__list-item a[data-id=campaign] {
        width: 6.9646875vw;
        height: 1.1318125vw
    }

    .kv {
        margin-top: 5vw;
        width: 100%;
        height: 56.125vw
    }

    .kv-front__title {
        width: 35.78125vw;
        height: 15.25vw
    }

    .kv-front__title {
        bottom: 4.8125vw;
        right: 4.3125vw
    }

    .kv-front__btn._2 {
        top: 8.75vw
    }

    .kv-front__btn._2 a div {
        margin-top: -0.125vw;
        font-size: 1.5vw
    }

    .kv-front__btn._2 a::after {
        width: 6.96875vw;
        height: 5.5625vw
    }

    .kv-front__btn._2 a::after {
        top: -0.625vw;
        right: 1vw;
        background-image: url(/special/bp-18-special-site/bp18/assets/images/floating_prize_img.45c949cf.webp)
    }

    .kv-front__btn {
        top: 2.375vw;
        right: 1.875vw
    }

    .kv-front__btn a {
        width: 21.875vw;
        height: 5.4375vw
    }

    .kv-front__btn a div {
        font-size: 1.5vw;
        margin: .9375vw 0 0 1vw;
        letter-spacing: -0.04em
    }

    .kv-front__btn a div .small {
        font-size: .875vw
    }

    .kv-front__modal-btn {
        bottom: 4.875vw;
        left: 3.125vw
    }

    .kv-front__modal-btn a {
        width: 12.1875vw;
        height: 6.9375vw
    }

    .kv-front__modal-btn a div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .heading {
        height: 57.5vw
    }

    .heading-wrapper__title {
        top: 18vw;
        left: 50%;
        font-size: 1.6875vw;
        letter-spacing: .17em;
        transform: translateX(-50%) scaleX(80%)
    }

    .heading-wrapper__text1 {
        top: 21.5625vw;
        left: 35vw
    }

    .heading-wrapper__text1 .glitch-text {
        font-size: 3.75vw;
        letter-spacing: .03em
    }

    .heading-wrapper__text2 {
        top: 26.25vw;
        left: 46.875vw
    }

    .heading-wrapper__text2 .glitch-text {
        font-size: 3.75vw;
        letter-spacing: .03em
    }

    .heading-wrapper__text2 .glitch-text::before,
    .heading-wrapper__text2 .glitch-text::after {
        top: 2.1875vw;
        width: 12.25vw;
        height: 1px
    }

    .heading-wrapper__text2 .glitch-text::before {
        left: -14.5vw
    }

    .heading-wrapper__text2 .glitch-text::after {
        left: 10.625vw
    }

    .heading._back {
        margin-top: 56.125vw
    }

    .heading._back .image {
        --i1: 7.6875vw auto auto 0;
        --i2: 3.5625vw auto auto 45vw;
        --i3: 6.5625vw auto auto 77.875vw;
        --i4: 27vw auto auto 3.75vw;
        --i5: 37.1875vw auto auto 28.25vw;
        --i6: 43.375vw auto auto 42.375vw;
        --i7: 35.3125vw auto auto 62.1875vw
    }

    .heading._back .image._1 {
        width: 29vw;
        height: 10.875vw
    }

    .heading._back .image._1 {
        inset: var(--i1)
    }

    .heading._back .image._2 {
        width: 26.6875vw;
        height: 9.0625vw
    }

    .heading._back .image._2 {
        inset: var(--i2)
    }

    .heading._back .image._3 {
        width: 15.375vw;
        height: 22.875vw
    }

    .heading._back .image._3 {
        inset: var(--i3)
    }

    .heading._back .image._4 {
        width: 18.875vw;
        height: 22.8125vw
    }

    .heading._back .image._4 {
        inset: var(--i4)
    }

    .heading._back .image._5 {
        width: 12.875vw;
        height: 9.25vw
    }

    .heading._back .image._5 {
        inset: var(--i5)
    }

    .heading._back .image._6 {
        width: 13.0625vw;
        height: 9.9375vw
    }

    .heading._back .image._6 {
        inset: var(--i6)
    }

    .heading._back .image._7 {
        width: 37.8125vw;
        height: 13vw
    }

    .heading._back .image._7 {
        inset: var(--i7)
    }

    .world {
        height: 56.25vw
    }

    .world-wrapper__heading {
        top: 3.75vw;
        left: 6.25vw
    }

    .world-wrapper__text {
        width: 41.125vw;
        height: 21.5625vw;
        bottom: 7.1875vw;
        right: 6.25vw;
        padding: 3vw 3.625vw
    }

    .world-wrapper__text h3 {
        margin-bottom: 1vw;
        font-size: 1.875vw;
        line-height: 1.2em
    }

    .world-wrapper__text .text {
        font-size: 1vw;
        line-height: 2em
    }

    .world .glitch-text {
        font-size: 7.75vw;
        letter-spacing: .2em
    }

    .world .glitch-text .big {
        font-size: 14.5vw;
        letter-spacing: .04em;
        line-height: 1.05em
    }

    .world._front {
        margin-top: calc(-100dvh + 5vw)
    }

    .world._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/world_bg.bbcb91a5.webp)
    }

    .world._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/world_bg_light.1dd86ec8.webp)
    }

    .chara {
        height: 56.25vw
    }

    .chara-wrapper__heading {
        top: .9375vw;
        right: -1.25vw
    }

    .chara-wrapper__heading .glitch-text {
        font-size: 6.25vw;
        letter-spacing: .14em
    }

    .chara-wrapper__heading .glitch-text .small {
        font-size: 2.5vw;
        letter-spacing: .07em
    }

    .chara-wrapper__heading .glitch-text .big {
        font-size: 8.5625vw;
        letter-spacing: -0.04em;
        line-height: 1.1em
    }

    .chara-wrapper__contents__text {
        top: 22.875vw;
        left: 6.25vw;
        width: 30.5vw;
        height: 17.8125vw;
        padding: 1.375vw 1.25vw
    }

    .chara-wrapper__contents__text .catch {
        font-size: 1.375vw
    }

    .chara-wrapper__contents__text .name {
        font-size: 4.375vw;
        margin-top: 1.25vw;
        letter-spacing: -0.1em
    }

    .chara-wrapper__contents__text .description {
        font-size: 1vw;
        margin-top: .625vw;
        line-height: 1.7em;
        letter-spacing: -0.06em
    }

    .chara-wrapper__contents__change-btn {
        bottom: 5.875vw;
        left: 27.3125vw
    }

    .chara-wrapper__contents__change-btn a {
        width: 9.375vw;
        height: 3.9375vw
    }

    .chara-wrapper__contents__change-btn a div {
        font-size: 1.5625vw;
        line-height: 1.2em;
        padding-right: 3.125vw
    }

    .chara-wrapper__contents__change-btn a::before,
    .chara-wrapper__contents__change-btn a::after {
        width: 1.75vw;
        height: .5625vw;
        right: 1.625vw
    }

    .chara-wrapper__contents__change-btn a::before {
        top: 1.25vw
    }

    .chara-wrapper__contents__change-btn a::after {
        top: 2.125vw
    }

    .chara-wrapper__contents__photo {
        top: 11.5vw;
        left: 32.5vw;
        --home-left: -7.375vw;
        --evo-left: -10.5vw;
        --evo-right: 3.125vw
    }

    .chara-wrapper__contents__photo .photo {
        width: 28.875vw;
        height: 34.1875vw
    }

    .chara-wrapper__contents__photo .photo._evo {
        top: -4.375vw;
        left: -7.375vw
    }

    .chara-wrapper__btns {
        width: 26.5625vw;
        right: 6.25vw;
        top: 27.75vw
    }

    .chara-wrapper__btns a {
        width: 12.125vw;
        height: 5.125vw
    }

    .chara-wrapper__btns a {
        margin-bottom: 1.25vw
    }

    .chara._back._1 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg1.6604e717.webp)
    }

    .chara._back._2 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg2.35f0177d.webp)
    }

    .chara._back._3 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg3.280813f2.webp)
    }

    .chara._back._4 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg4.314f5391.webp)
    }

    .chara._back._5 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg5.189c64b0.webp)
    }

    .chara._back._6 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg6.346ad31c.webp)
    }

    ._1.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 19.6875vw 0;
        --p3: 19.6875vw 4.375vw;
        --p4: 21.5vw 4.375vw;
        --p5: 21.5vw 8.75vw;
        --p6: 24.8125vw 8.75vw;
        --p7: 24.8125vw 100%;
        --p8: 0 100%
    }

    ._2.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 22.25vw 0;
        --p3: 22.25vw 4.375vw;
        --p4: 26.625vw 4.375vw;
        --p5: 26.625vw 8.75vw;
        --p6: 30.125vw 8.75vw;
        --p7: 30.125vw 15.9375vw;
        --p8: 0 15.9375vw
    }

    ._3.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 25.875vw 0;
        --p3: 25.875vw 4.375vw;
        --p4: 26.4375vw 4.375vw;
        --p5: 26.4375vw 8.75vw;
        --p6: 27.5vw 8.75vw;
        --p7: 27.5vw 15.9375vw;
        --p8: 0 15.9375vw
    }

    ._4.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 23vw 0;
        --p3: 23vw 4.375vw;
        --p4: 10.0625vw 4.375vw;
        --p5: 10.0625vw 8.75vw;
        --p6: 28.4375vw 8.75vw;
        --p7: 28.4375vw 15.9375vw;
        --p8: 0 15.9375vw
    }

    ._5.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 14.9375vw 0;
        --p3: 14.9375vw 4.375vw;
        --p4: 28.8125vw 4.375vw;
        --p5: 28.8125vw 8.75vw;
        --p6: 28vw 8.75vw;
        --p7: 28vw 15.9375vw;
        --p8: 0 15.9375vw
    }

    ._6.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 18.1875vw 0;
        --p3: 18.1875vw 4.375vw;
        --p4: 21.5625vw 4.375vw;
        --p5: 21.5625vw 8.75vw;
        --p6: 26.9375vw 8.75vw;
        --p7: 26.9375vw 100%;
        --p8: 0 100%
    }

    .prologue {
        height: 56.25vw
    }

    .prologue-wrapper__heading {
        top: 3.5vw;
        right: -1.25vw
    }

    .prologue-wrapper__heading .glitch-text {
        font-size: 6.25vw;
        letter-spacing: -0.04em
    }

    .prologue-wrapper__heading .glitch-text .big {
        font-size: 8.5625vw;
        letter-spacing: -0.05em;
        line-height: .95em
    }

    .prologue-wrapper__contents {
        width: 60vw;
        height: 31.25vw;
        top: 21.875vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .prologue-wrapper__contents-text p {
        font-size: 1vw;
        line-height: 2.25em;
        letter-spacing: 0
    }

    .prologue-wrapper__contents .btn {
        width: 17.5vw;
        height: 3.9375vw
    }

    .prologue-wrapper__contents .btn {
        margin: 1.5625vw auto 0
    }

    .prologue-wrapper__contents .btn div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .prologue._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg.578f67a9.webp)
    }

    .prologue._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg_light.5a8f7b16.webp)
    }

    .epilogue {
        height: 56.25vw
    }

    .epilogue-wrapper__heading {
        top: 3.5vw;
        right: -1.25vw
    }

    .epilogue-wrapper__heading .glitch-text {
        font-size: 6.25vw;
        letter-spacing: -0.04em
    }

    .epilogue-wrapper__heading .glitch-text .big {
        font-size: 8.5625vw;
        letter-spacing: -0.05em;
        line-height: .95em
    }

    .epilogue-wrapper__contents {
        width: 60vw;
        height: 31.25vw;
        top: 21.875vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .epilogue-wrapper__contents-text p {
        font-size: 1vw;
        line-height: 2.25em;
        letter-spacing: 0
    }

    .epilogue-wrapper__contents .btn {
        width: 17.5vw;
        height: 3.9375vw
    }

    .epilogue-wrapper__contents .btn {
        margin: 1.5625vw auto 0
    }

    .epilogue-wrapper__contents .btn div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .epilogue._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg.578f67a9.webp)
    }

    .epilogue._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg_light.5a8f7b16.webp)
    }

    .notice {
        height: 81.25vw
    }

    .notice-wrapper__heading {
        top: 3.4375vw;
        left: 6vw
    }

    .notice-wrapper__heading .glitch-text {
        font-size: 8.5625vw;
        letter-spacing: -0.2em
    }

    .notice-wrapper__date {
        top: 30.375vw;
        left: 50%;
        transform: translateX(-50%) scaleX(80%)
    }

    .notice-wrapper__date .title {
        width: 100%;
        font-size: 1.875vw;
        letter-spacing: .064em
    }

    .notice-wrapper__date .date {
        margin-top: .5vw;
        font-size: 4.375vw;
        letter-spacing: .05em
    }

    .notice-wrapper__list {
        position: absolute;
        display: flex;
        height: 56.25vw;
        width: 100vw
    }

    .notice-wrapper__list-item {
        display: block;
        width: 16.125vw;
        height: 100%
    }

    .notice-wrapper__list-item .text {
        width: 100%;
        font-size: 1.875vw;
        bottom: 12.8125vw
    }

    .notice-wrapper__list-item .btn {
        width: 13.4375vw;
        height: 5.125vw
    }

    .notice-wrapper__list-item .btn {
        bottom: 7.1875vw
    }

    .notice-wrapper__list-item .btn div {
        display: flex;
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .notice-wrapper__list-item:first-child,
    .notice-wrapper__list-item:last-child {
        width: 18.125vw
    }

    .notice-wrapper__list-item:first-child .text {
        left: .8125vw
    }

    .notice-wrapper__list-item:first-child .btn {
        left: 52%
    }

    .notice-wrapper__list-item:last-child .text {
        right: .875vw
    }

    .notice-wrapper__list-item:last-child .btn {
        left: 46%
    }

    .notice-wrapper__addendum {
        height: 25vw;
        top: 56.25vw
    }

    .notice-wrapper__addendum-heading {
        top: 1.875vw;
        right: 2.75vw
    }

    .notice-wrapper__addendum-heading .glitch-text {
        font-size: 8.5625vw;
        letter-spacing: .02em
    }

    .notice-wrapper__addendum-text {
        font-size: 2.125vw;
        letter-spacing: -0.05em;
        line-height: 1.3em;
        top: 7.875vw;
        left: 6.25vw
    }

    .notice-wrapper__addendum .btn {
        width: 17.5vw;
        height: 3.9375vw
    }

    .notice-wrapper__addendum .btn {
        top: 13.75vw;
        right: 6.25vw
    }

    .notice-wrapper__addendum .btn div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .notice._back .notice-inner {
        height: 56.25vw
    }

    .notice._back .notice-inner__image:nth-child(1) {
        width: 35.875vw;
        height: 56.25vw
    }

    .notice._back .notice-inner__image:nth-child(2) {
        width: 32.125vw;
        height: 56.25vw
    }

    .notice._back .notice-inner__image:nth-child(3) {
        width: 32.125vw;
        height: 56.25vw
    }

    .notice._back .notice-inner__image:nth-child(4) {
        width: 32.125vw;
        height: 56.25vw
    }

    .notice._back .notice-inner__image:nth-child(5) {
        width: 32.125vw;
        height: 56.25vw
    }

    .notice._back .notice-inner__image:nth-child(6) {
        width: 35.875vw;
        height: 56.25vw
    }

    .notice._back .notice-inner__addendum .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/epilogue_bg_on.5fe5565d.webp)
    }

    .notice._back .notice-inner__image:nth-child(1) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg1_on.606efb9f.webp)
    }

    .notice._back .notice-inner__image:nth-child(2) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg2_on.c19ce5af.webp)
    }

    .notice._back .notice-inner__image:nth-child(3) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg3_on.bcea6b1e.webp)
    }

    .notice._back .notice-inner__image:nth-child(4) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg4_on.a80a3a68.webp)
    }

    .notice._back .notice-inner__image:nth-child(5) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg5_on.a8e2e1f9.webp)
    }

    .notice._back .notice-inner__image:nth-child(6) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg6_on.602b68b0.webp)
    }

    .report {
        height: 56.25vw
    }

    .report-wrapper__heading {
        top: 4.0625vw;
        left: 6.25vw
    }

    .report-wrapper__heading .glitch-text {
        font-size: 6.25vw;
        letter-spacing: .05em
    }

    .report-wrapper__heading .glitch-text .big {
        font-size: 8.625vw;
        letter-spacing: .04em;
        line-height: 1.05em
    }

    .report-wrapper__btns {
        width: 56.5625vw;
        right: 6.25vw;
        bottom: 8.875vw
    }

    .report-wrapper__btns a {
        width: 8.09375vw;
        height: 33.5625vw
    }

    .report._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/report_bg.e8ff7d91.webp)
    }

    .report._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/report_bg_light.b1bf0e63.webp)
    }

    .product {
        height: 94.0625vw;
        margin-top: -100dvh
    }

    .product-wrapper__heading {
        top: 6.875vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .product-wrapper__heading .glitch-text {
        font-size: 3.625vw;
        letter-spacing: .02em
    }

    .product-wrapper__contents {
        width: 75vw;
        margin: 0 auto 0;
        padding-bottom: 3.75vw;
        top: 15.375vw
    }

    .product-wrapper__contents .hr {
        margin: 0 auto 3.5vw;
        width: 68.75vw
    }

    .product-wrapper__contents-information {
        padding: 3.75vw 0 3.75vw 3.75vw
    }

    .product-wrapper__contents-information .image {
        width: 22.21875vw;
        height: 20vw
    }

    .product-wrapper__contents-information .image {
        margin-top: 1.75vw;
        margin-left: 8.125vw
    }

    .product-wrapper__contents-information .details {
        margin-left: 3vw
    }

    .product-wrapper__contents-information .details-title {
        font-size: 2.25vw;
        margin-bottom: 1.875vw;
        letter-spacing: -0.05em
    }

    .product-wrapper__contents-information .details-item {
        font-size: 1.25vw;
        margin-bottom: 1.25vw
    }

    .product-wrapper__contents-information .details-item__title {
        width: 10.125vw;
        padding: .625vw 0 .5vw;
        margin-right: 1.25vw;
        min-height: 2.5vw
    }

    .product-wrapper__contents-information .details-item__text {
        line-height: 1.4em
    }

    .product-wrapper__contents-information .details-btn {
        width: 17.5vw;
        height: 3.9375vw
    }

    .product-wrapper__contents-information .details-btn {
        margin-top: 2.375vw
    }

    .product-wrapper__contents-information .details-btn div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .product-wrapper__contents-presents {
        letter-spacing: -0.15em
    }

    .product-wrapper__contents-presents .title {
        font-size: 2.25vw
    }

    .product-wrapper__contents-presents .image {
        width: 55.625vw;
        height: 18.9375vw
    }

    .product-wrapper__contents-presents .image {
        margin: 1.125vw auto .5vw
    }

    .product-wrapper__contents-presents .text {
        font-size: 1.625vw
    }

    .product-wrapper__contents-presents .text .small {
        font-size: 1.125vw;
        margin-top: .625vw
    }

    .product-wrapper__contents-presents .attention {
        margin-top: 1.125vw;
        margin-left: 11.25vw
    }

    .product-wrapper__contents-presents .attention-mark {
        margin-bottom: .375vw
    }

    .product-wrapper__contents-presents .attention-mark {
        font-size: .875vw
    }

    .product-wrapper__contents::before {
        --height: 1.25vw;
        height: var(--height);
        width: 100%;
        top: calc(var(--height)*-1)
    }

    .campaign {
        height: 70.9375vw
    }

    .campaign._green {
        height: 100vw
    }

    .campaign-wrapper._green {
        margin-bottom: 13.75vw
    }

    .campaign-wrapper__heading {
        top: 6.625vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .campaign-wrapper__heading .glitch-text {
        font-size: 3.625vw;
        letter-spacing: .02em
    }

    .campaign-wrapper__contents {
        top: 11.75vw
    }

    .campaign-wrapper__date-inner {
        font-size: 1.375vw;
        height: 2.5vw;
        padding: .4375vw 1.25vw
    }

    .campaign-wrapper__date span {
        margin-right: 1.25vw;
        padding-right: 1.25vw
    }

    .campaign-wrapper__date span::after {
        top: .25vw
    }

    .campaign-wrapper__end-text {
        font-size: 1.875vw;
        line-height: 1.4em;
        width: 80vw;
        height: 28.75vw;
        top: 3.125vw
    }

    .campaign-wrapper .details {
        width: 75vw;
        margin: 4.8125vw auto 0
    }

    .campaign-wrapper .details._story .details-list {
        height: 30vw
    }

    .campaign-wrapper .details-list {
        width: 23.125vw;
        height: 23.125vw
    }

    .campaign-wrapper .details-list .step {
        font-size: 2.125vw;
        letter-spacing: .1em;
        top: -3.8125vw;
        left: 1vw
    }

    .campaign-wrapper .details-list .step-number {
        font-size: 3.3125vw;
        margin-left: .25vw
    }

    .campaign-wrapper .details-list .description {
        font-size: 1.125vw;
        line-height: 1.4em;
        padding: 0 1.625vw;
        margin-top: 1.875vw
    }

    .campaign-wrapper .details-list .description .small {
        font-size: .875vw
    }

    .campaign-wrapper .details-list .image {
        margin: 1.5625vw auto
    }

    .campaign-wrapper .details-list .image._icon {
        width: 10.75vw;
        height: 10.78125vw
    }

    .campaign-wrapper .details-list .image._icon {
        margin: .625vw auto
    }

    .campaign-wrapper .details-list .image._phone {
        width: 7.0625vw;
        height: 13.8125vw
    }

    .campaign-wrapper .details-list .image._sign {
        width: 11vw;
        height: 12.375vw
    }

    .campaign-wrapper .details-list .image._story-icon {
        margin: 0 auto;
        width: 17.625vw
    }

    .campaign-wrapper .details-list .image._story-phone {
        width: 9.375vw
    }

    .campaign-wrapper .details-list .image._story-prize {
        width: 17.4375vw;
        height: 12.4375vw
    }

    .campaign-wrapper .details-list .btn {
        width: 18.75vw;
        height: 3.9375vw
    }

    .campaign-wrapper .details-list .btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.875vw
    }

    .campaign-wrapper .details-list .btn div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .campaign-wrapper .details-list::before {
        --height: 1.25vw
    }

    .campaign-wrapper__review {
        margin: 5.625vw auto 0;
        width: 75vw
    }

    .campaign-wrapper__review-title {
        font-size: 2.5vw;
        letter-spacing: .1em;
        top: -3.125vw;
        left: 1vw
    }

    .campaign-wrapper__review-inner {
        padding: 3.125vw 5.625vw 2.5vw
    }

    .campaign-wrapper__review-inner .list-item {
        width: 19.34375vw;
        height: 7.03125vw
    }

    .campaign-wrapper__review-inner .list-item {
        margin: 0 auto 1.875vw
    }

    .campaign-wrapper__review-inner .list-item:last-child {
        margin-bottom: 1.25vw
    }

    .campaign-wrapper__review-inner .list-item div {
        font-size: 1.5625vw;
        line-height: 1.2em
    }

    .campaign-wrapper__review-inner .attention {
        font-size: 1vw
    }

    .campaign-wrapper__review::before {
        --height: 1.25vw
    }

    .campaign-wrapper__terms {
        margin-top: 3.4375vw
    }

    .campaign-wrapper__terms .title {
        font-size: 1.875vw;
        margin-bottom: .9375vw
    }

    .campaign-wrapper__terms .terms-inner {
        width: 50vw;
        height: 15.625vw;
        padding: 2.1875vw 1.25vw .9375vw 2.1875vw;
        font-size: .875vw
    }

    .campaign-wrapper__terms .terms-inner__text::-webkit-scrollbar {
        height: 2px
    }

    .campaign-wrapper__terms .terms-inner__text {
        width: 45.9375vw;
        height: 11.25vw;
        padding-right: 1.5vw;
        line-height: 1.6em
    }

    .camera-wrapper__frame::before,
    .camera-wrapper__frame::after {
        width: 10vw;
        height: 6.625vw;
        --range: 2vw
    }

    .camera-wrapper__frame::before {
        left: var(--range)
    }

    .camera-wrapper__frame::after {
        right: var(--range)
    }

    .camera-wrapper__frame._upper::before,
    .camera-wrapper__frame._upper::after {
        top: var(--range)
    }

    .camera-wrapper__frame._bottom::before,
    .camera-wrapper__frame._bottom::after {
        bottom: var(--range)
    }

    .camera-wrapper__meter {
        width: 1.37596875vw;
        height: 13.7490625vw
    }

    .camera-wrapper__meter {
        left: 1.875vw;
        background-image: url(/special/bp-18-special-site/bp18/assets/images/meter.3195bb36.svg)
    }

    .camera-wrapper__meter-point {
        width: .75vw;
        height: 1.0625vw
    }

    .camera-wrapper__meter-point {
        top: -0.5vw;
        left: 1.875vw;
        background-image: url(/special/bp-18-special-site/bp18/assets/images/meter_point.e37e9bb6.svg)
    }

    .camera-wrapper__meter-point[data-id=world] {
        top: -0.5vw
    }

    .camera-wrapper__meter-point[data-id=chara] {
        top: 2.875vw
    }

    .camera-wrapper__meter-point[data-id=report] {
        top: 6.25vw
    }

    .camera-wrapper__meter-point[data-id=prologue] {
        top: 9.625vw
    }

    .camera-wrapper__meter-point[data-id=story] {
        top: 13vw
    }

    .camera-wrapper__battery {
        bottom: 3.125vw;
        right: 3.875vw;
        width: 3.8125vw;
        height: 1.625vw
    }

    .camera-wrapper__size {
        bottom: 3.25vw;
        left: 3.375vw;
        font-size: 1.4375vw
    }

    .camera-wrapper__size ._w {
        margin-right: 0
    }

    .camera-frame {
        top: 5vw;
        height: calc(100dvh - 5vw)
    }

    .main-maskbg {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/bg_pattern.c8b38b2c.webp);
        background-size: 6vw;
        background-repeat: repeat
    }

    .others {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/product_bg.84a6503d.webp)
    }

    .others._campaign {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/campaign_bg.ed36c1ad.webp)
    }

    .others::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/bg_pattern.c8b38b2c.webp);
        background-size: 6vw;
        background-repeat: repeat
    }

    #c-modal .c-modal-image {
        max-width: 100%
    }
}

@media (min-width: 768px)and (hover: hover)and (pointer: fine) {
    .kv-front__btn a:hover .hover {
        opacity: 1
    }

    .kv-front__btn a:hover div {
        color: #ff2a00
    }

    .kv-front__modal-btn a:hover .hover {
        opacity: 1
    }

    .kv-front__modal-btn a:hover div {
        color: #ff2a00
    }

    .chara-wrapper__contents__change-btn a.active:hover .text {
        color: #ffc000
    }

    .chara-wrapper__contents__change-btn a.active:hover .text._normal {
        display: none
    }

    .chara-wrapper__contents__change-btn a.active:hover .text._evo {
        display: flex
    }

    .chara-wrapper__contents__change-btn a.active:hover .hover {
        opacity: 0
    }

    .chara-wrapper__contents__change-btn a.active:hover::before,
    .chara-wrapper__contents__change-btn a.active:hover::after {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_normal_btn_arw_left_off.1d0decdd.svg)
    }

    .chara-wrapper__contents__change-btn a.active:hover::before {
        transform: scaleX(-1);
        opacity: .5
    }

    .chara-wrapper__contents__change-btn a.active:hover::after {
        transform: scaleX(1);
        opacity: 1
    }

    .chara-wrapper__contents__change-btn a:hover .text {
        color: #ff2a00
    }

    .chara-wrapper__contents__change-btn a:hover .text._normal {
        display: flex
    }

    .chara-wrapper__contents__change-btn a:hover .text._evo {
        display: none
    }

    .chara-wrapper__contents__change-btn a:hover .hover {
        opacity: 1
    }

    .chara-wrapper__contents__change-btn a:hover::before,
    .chara-wrapper__contents__change-btn a:hover::after {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_evolve_btn_arw_right_on.049e951d.svg)
    }

    .chara-wrapper__contents__change-btn a:hover::before {
        transform: scaleX(-1)
    }

    .chara-wrapper__contents__change-btn a:hover::after {
        transform: scale(1);
        opacity: 1
    }

    .chara-wrapper__btns a:hover .text {
        color: #ff2a00
    }

    .chara-wrapper__btns a:hover .hover {
        opacity: 1
    }

    .prologue-wrapper__contents .btn:hover .hover {
        opacity: 1
    }

    .prologue-wrapper__contents .btn:hover div {
        color: #ff2a00
    }

    .epilogue-wrapper__contents .btn:hover .hover {
        opacity: 1
    }

    .epilogue-wrapper__contents .btn:hover div {
        color: #ff2a00
    }

    .notice-wrapper__list-item .btn:hover .hover {
        opacity: 1
    }

    .notice-wrapper__list-item .btn:hover div {
        color: #ff2a00
    }

    .notice-wrapper__addendum .btn:hover .hover {
        opacity: 1
    }

    .notice-wrapper__addendum .btn:hover div {
        color: #ff2a00
    }

    .report-wrapper__btns a:hover .hover {
        opacity: 1
    }

    .product-wrapper__contents-information .details-btn:hover .hover {
        opacity: 1
    }

    .product-wrapper__contents-information .details-btn:hover div {
        color: #ff2a00
    }

    .campaign-wrapper .details-list .btn:hover .hover {
        opacity: 1
    }

    .campaign-wrapper .details-list .btn:hover div {
        color: #ff2a00
    }

    .campaign-wrapper__review-inner .list-item:hover .hover {
        opacity: 1
    }

    .campaign-wrapper__review-inner .list-item:hover div {
        color: #ff2a00
    }

    #c-modal .c-modal__contents__close:hover {
        opacity: .8
    }
}

@media (min-width: 768px)and (hover: hover)and (pointer: fine)and (max-width: 767.98px) {
    .chara-wrapper__contents__change-btn a.active:hover::before {
        top: 2.6666666667vw
    }

    .chara-wrapper__contents__change-btn a.active:hover::after {
        top: 4.5333333333vw
    }

    .chara-wrapper__contents__change-btn a:hover::before {
        top: 4.5333333333vw
    }

    .chara-wrapper__contents__change-btn a:hover::after {
        top: 2.6666666667vw
    }
}

@media (min-width: 768px)and (hover: hover)and (pointer: fine)and (min-width: 768px) {
    .chara-wrapper__contents__change-btn a.active:hover::before {
        top: 1.25vw
    }

    .chara-wrapper__contents__change-btn a.active:hover::after {
        top: 2.125vw
    }

    .chara-wrapper__contents__change-btn a:hover::before {
        top: 2.125vw
    }

    .chara-wrapper__contents__change-btn a:hover::after {
        top: 1.25vw
    }
}

@media (min-width: 768px)and (max-width: 1599.98px) {
    .nav .menu {
        width: 87.5vw
    }

    #c-modal .c-modal__body {
        margin-top: 0
    }

    #c-modal .c-modal__contents__close {
        width: 3.125vw;
        height: 3.125vw;
        top: -3.125vw;
        right: 0
    }

    #c-modal .c-modal__contents__close span {
        width: 3.125vw
    }

    #c-modal .c-modal-movie {
        width: 40vw;
        height: 23.0625vw
    }

    #c-modal .c-modal-image {
        width: 75vw
    }
}

@media (min-width: 1600px) {
    .nav .menu {
        width: 1400px
    }

    #c-modal .c-modal__body {
        margin-top: 0
    }

    #c-modal .c-modal__contents__close {
        width: 50px;
        height: 50px;
        top: -50px;
        right: 0
    }

    #c-modal .c-modal__contents__close span {
        width: 50px
    }

    #c-modal .c-modal-movie {
        width: 640px;
        height: 369px
    }

    #c-modal .c-modal-image {
        width: 1200px
    }
}

@media (max-width: 1000px)and (max-height: 670px)and (min-width: 768px)and (max-width: 1599.98px),
(min-width: 1001px)and (max-height: 1000px)and (min-width: 768px)and (max-width: 1599.98px) {
    .nav .menu {
        top: 0
    }
}

@media (max-width: 1000px)and (max-height: 670px)and (min-width: 1600px),
(min-width: 1001px)and (max-height: 1000px)and (min-width: 1600px) {
    .nav .menu {
        top: 0
    }
}

@media (max-width: 1000px)and (max-height: 670px)and (min-width: 768px),
(min-width: 1001px)and (max-height: 1000px)and (min-width: 768px) {
    .nav .menu {
        transform: translateY(0)
    }
}

@media (max-width: 767.98px) {
    .nav .menu {
        width: 100%
    }

    .nav .menu-wrapper__logo {
        width: 84.1333333333vw;
        height: 28.4vw
    }

    .nav .menu-wrapper__logo {
        margin: 32.2666666667vw auto 0
    }

    .nav .menu-wrapper__list {
        width: 84vw;
        margin: 16vw auto 0
    }

    .nav .menu-wrapper__list-item {
        width: 38.4vw;
        height: 9.3333333333vw;
        margin-bottom: 13.3333333333vw
    }

    .nav .menu-wrapper__list-item a[data-id=world] {
        width: 30.1792vw;
        height: 4.4457333333vw
    }

    .nav .menu-wrapper__list-item a[data-id=chara] {
        width: 17.1790666667vw;
        height: 4.4292vw
    }

    .nav .menu-wrapper__list-item a[data-id=report] {
        width: 17.5874666667vw;
        height: 4.4417333333vw
    }

    .nav .menu-wrapper__list-item a[data-id=prologue] {
        width: 20.6666666667vw;
        height: 4.3vw
    }

    .nav .menu-wrapper__list-item a[data-id=notice] {
        width: 17.55vw;
        height: 4.4292vw
    }

    .nav .menu-wrapper__list-item a[data-id=product] {
        width: 17.4541333333vw;
        height: 4.4374666667vw
    }

    .nav .menu-wrapper__list-item a[data-id=campaign] {
        width: 24.3708vw;
        height: 3.9586666667vw
    }

    .nav .menu-wrapper__list-item:has(.active)::before,
    .nav .menu-wrapper__list-item:has(.active)::after {
        width: 2.8vw;
        height: 9.3292vw
    }

    .kv {
        margin-top: 12vw;
        width: 100%;
        height: 56.2666666667vw
    }

    .kv-front__title {
        width: 87.3333333333vw;
        height: 36.5333333333vw
    }

    .kv-front__title {
        top: 49.3333333333vw;
        right: 50%;
        transform: translateX(50%)
    }

    .kv-front__btn._2 {
        top: 160vw
    }

    .kv-front__btn._2 a div {
        margin-top: -.2666666667vw;
        font-size: 5.6vw;
        transform: scaleX(80%)
    }

    .kv-front__btn._2 a::after {
        width: 30vw;
        height: 24.4vw
    }

    .kv-front__btn._2 a::after {
        top: -4.5333333333vw;
        right: 2.6666666667vw;
        background-image: url(/special/bp-18-special-site/bp18/assets/images/floating_prize_img.01fb1eeb.webp)
    }

    .kv-front__btn {
        top: 130.6666666667vw;
        right: 50%;
        transform: translateX(50%)
    }

    .kv-front__btn a {
        width: 82.6666666667vw;
        height: 24.1333333333vw
    }

    .kv-front__btn a div {
        font-size: 5.6vw;
        margin: 3.4666666667vw 0 0 3.4666666667vw
    }

    .kv-front__btn a div .small {
        font-size: 3.2vw
    }

    .kv-front__modal-btn {
        top: 91.2vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .kv-front__modal-btn a {
        width: 49.3333333333vw;
        height: 28vw
    }

    .heading {
        margin-top: 133.3333333333vw;
        height: 133.3333333333vw
    }

    .heading-background {
        top: -200vw;
        width: 100%
    }

    .heading-wrapper__title {
        top: 49.3333333333vw;
        left: 50%;
        font-size: 3.6vw;
        letter-spacing: 0;
        transform: translateX(-50%) scaleX(80%)
    }

    .heading-wrapper__text1 {
        top: 56.2666666667vw;
        left: 17.3333333333vw
    }

    .heading-wrapper__text1 .glitch-text {
        font-size: 8vw;
        letter-spacing: 0
    }

    .heading-wrapper__text2 {
        top: 65.3333333333vw;
        left: 42.6666666667vw
    }

    .heading-wrapper__text2 .glitch-text {
        font-size: 8vw;
        letter-spacing: .2em
    }

    .heading-wrapper__text2 .glitch-text::before,
    .heading-wrapper__text2 .glitch-text::after {
        top: 5.3333333333vw;
        width: 26.6666666667vw;
        height: 1px
    }

    .heading-wrapper__text2 .glitch-text::before {
        left: -30vw
    }

    .heading-wrapper__text2 .glitch-text::after {
        left: 22.6666666667vw
    }

    .heading._back {
        margin-top: 190.6666666667vw
    }

    .heading._back .image {
        --i1: 24.4vw auto auto 0;
        --i2: 7.7333333333vw auto auto 35.8666666667vw;
        --i3: 10.1333333333vw auto auto 75.2vw;
        --i4: 79.2vw auto auto 5.8666666667vw;
        --i5: 102.1333333333vw auto auto 49.7333333333vw;
        --i6: 85.8666666667vw auto auto 34.6666666667vw;
        --i7: 80vw auto auto 65.3333333333vw
    }

    .heading._back .image._1 {
        width: 41.0666666667vw;
        height: 15.2vw
    }

    .heading._back .image._1 {
        inset: var(--i1)
    }

    .heading._back .image._2 {
        width: 34.6666666667vw;
        height: 12.4vw
    }

    .heading._back .image._2 {
        inset: var(--i2)
    }

    .heading._back .image._3 {
        width: 18.2666666667vw;
        height: 33.7333333333vw
    }

    .heading._back .image._3 {
        inset: var(--i3)
    }

    .heading._back .image._4 {
        width: 22.5333333333vw;
        height: 30.6666666667vw
    }

    .heading._back .image._4 {
        inset: var(--i4)
    }

    .heading._back .image._5 {
        width: 19.4666666667vw;
        height: 14vw
    }

    .heading._back .image._5 {
        inset: var(--i5)
    }

    .heading._back .image._6 {
        width: 20vw;
        height: 14.9333333333vw
    }

    .heading._back .image._6 {
        inset: var(--i6)
    }

    .heading._back .image._7 {
        width: 34.5333333333vw;
        height: 16.2666666667vw
    }

    .heading._back .image._7 {
        inset: var(--i7)
    }

    .world {
        height: 180vw
    }

    .world-wrapper__heading {
        top: 10.6666666667vw;
        left: 8vw
    }

    .world-wrapper__text {
        width: 86.6666666667vw;
        height: 68.6666666667vw;
        bottom: 30.6666666667vw;
        right: 0;
        padding: 6.9333333333vw 5.3333333333vw
    }

    .world-wrapper__text h3 {
        margin-bottom: 2.6666666667vw;
        font-size: 4.8vw;
        line-height: 1.5em
    }

    .world-wrapper__text .text {
        font-size: 3.2vw;
        line-height: 1.75em
    }

    .world .glitch-text {
        font-size: 15.3333333333vw;
        letter-spacing: .2em
    }

    .world .glitch-text .big {
        font-size: 28vw;
        letter-spacing: -0.01em;
        line-height: 1.05em
    }

    .world._front {
        margin-top: calc(-100dvh + 5.3333333333vw)
    }

    .world._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/world_bg.3a93a37c.webp)
    }

    .chara {
        height: 210.4vw
    }

    .chara-wrapper__heading {
        top: 8vw;
        right: -1.3333333333vw
    }

    .chara-wrapper__heading .glitch-text {
        font-size: 9.6vw;
        letter-spacing: 0
    }

    .chara-wrapper__heading .glitch-text .small {
        font-size: 4.8vw
    }

    .chara-wrapper__heading .glitch-text .big {
        font-size: 13.3333333333vw;
        line-height: .9em
    }

    .chara-wrapper__contents__text {
        top: 122.6666666667vw;
        left: 8.2666666667vw;
        width: 86.6666666667vw;
        height: 41.8666666667vw;
        padding: 3.4666666667vw 3.7333333333vw
    }

    .chara-wrapper__contents__text .catch {
        font-size: 3.2vw;
        line-height: .7em
    }

    .chara-wrapper__contents__text .name {
        font-size: 10.4vw;
        margin-top: 2.6666666667vw;
        line-height: 1em
    }

    .chara-wrapper__contents__text .description {
        font-size: 2.9333333333vw;
        margin-top: 2.9333333333vw;
        line-height: 1.5em
    }

    .chara-wrapper__contents__change-btn {
        bottom: 86.6666666667vw;
        left: 72vw
    }

    .chara-wrapper__contents__change-btn a {
        width: 20vw;
        height: 8.4vw
    }

    .chara-wrapper__contents__change-btn a div {
        font-size: 3.3333333333vw;
        line-height: 1.2em;
        padding-right: 3.7333333333vw
    }

    .chara-wrapper__contents__change-btn a::before,
    .chara-wrapper__contents__change-btn a::after {
        width: 3.7333333333vw;
        height: 1.2vw;
        right: 2.6666666667vw
    }

    .chara-wrapper__contents__change-btn a::before {
        top: 2.6666666667vw
    }

    .chara-wrapper__contents__change-btn a::after {
        top: 4.5333333333vw
    }

    .chara-wrapper__contents__photo {
        top: 62.6666666667vw;
        left: 28vw;
        --home-left: -15.7333333333vw;
        --evo-left: -22.4vw;
        --evo-right: 6.6666666667vw
    }

    .chara-wrapper__contents__photo .photo {
        width: 61.0666666667vw;
        height: 72.2666666667vw
    }

    .chara-wrapper__contents__photo .photo._evo {
        top: -9.3333333333vw;
        left: -15.7333333333vw
    }

    .chara-wrapper__btns {
        width: 84.5333333333vw;
        right: 7.6vw;
        top: 167.2vw
    }

    .chara-wrapper__btns a {
        width: 25.8666666667vw;
        height: 10.9333333333vw
    }

    .chara-wrapper__btns a {
        margin-bottom: 2.6666666667vw
    }

    .chara._back._1 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg1.bf014d1f.webp)
    }

    .chara._back._2 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg2.4633a846.webp)
    }

    .chara._back._3 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg3.37d597d6.webp)
    }

    .chara._back._4 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg4.95959937.webp)
    }

    .chara._back._5 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg5.a7348118.webp)
    }

    .chara._back._6 {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/chara_bg6.ea5b1ca6.webp)
    }

    ._1.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 46.9333333333vw 0;
        --p3: 46.9333333333vw 8vw;
        --p4: 53.3333333333vw 8vw;
        --p5: 53.3333333333vw 19.4666666667vw;
        --p6: 73.3333333333vw 19.4666666667vw;
        --p7: 73.3333333333vw 100%;
        --p8: 0 100%
    }

    ._2.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 52.8vw 0;
        --p3: 52.8vw 8vw;
        --p4: 69.3333333333vw 8vw;
        --p5: 69.3333333333vw 19.4666666667vw;
        --p6: 87.7333333333vw 19.4666666667vw;
        --p7: 87.7333333333vw 37.0666666667vw;
        --p8: 0 37.0666666667vw
    }

    ._3.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 61.6vw 0;
        --p3: 61.6vw 8vw;
        --p4: 69.3333333333vw 8vw;
        --p5: 69.3333333333vw 19.4666666667vw;
        --p6: 82vw 19.4666666667vw;
        --p7: 82vw 37.0666666667vw;
        --p8: 0 37.0666666667vw
    }

    ._4.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 57.3333333333vw 0;
        --p3: 57.3333333333vw 8vw;
        --p4: 25.2vw 8vw;
        --p5: 25.2vw 19.4666666667vw;
        --p6: 84.5333333333vw 19.4666666667vw;
        --p7: 84.5333333333vw 37.0666666667vw;
        --p8: 0 37.0666666667vw
    }

    ._5.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 35.3333333333vw 0;
        --p3: 35.3333333333vw 8vw;
        --p4: 73.3333333333vw 8vw;
        --p5: 73.3333333333vw 19.4666666667vw;
        --p6: 84vw 19.4666666667vw;
        --p7: 84vw 37.0666666667vw;
        --p8: 0 37.0666666667vw
    }

    ._6.chara-wrapper__contents {
        --p1: 0 0;
        --p2: 42.6666666667vw 0;
        --p3: 42.6666666667vw 8vw;
        --p4: 50.6666666667vw 8vw;
        --p5: 50.6666666667vw 19.4666666667vw;
        --p6: 79.2vw 19.4666666667vw;
        --p7: 79.2vw 100%;
        --p8: 0 100%
    }

    .prologue {
        height: 169.3333333333vw
    }

    .prologue-wrapper__heading {
        top: 12vw;
        right: -5.3333333333vw
    }

    .prologue-wrapper__heading .glitch-text {
        font-size: 9.6vw;
        letter-spacing: 0
    }

    .prologue-wrapper__heading .glitch-text .big {
        font-size: 13.3333333333vw
    }

    .prologue-wrapper__contents {
        width: 72vw;
        top: 53.6vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .prologue-wrapper__contents-text p {
        font-size: 2.9333333333vw;
        line-height: 1.8em
    }

    .prologue-wrapper__contents .btn {
        width: 72vw;
        height: 12vw
    }

    .prologue-wrapper__contents .btn {
        margin: 4vw auto 0
    }

    .prologue-wrapper__contents .btn div {
        font-size: 4vw
    }

    .prologue._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg.3dd6171f.webp)
    }

    .prologue._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg_light.b545c343.webp)
    }

    .epilogue {
        height: 172vw
    }

    .epilogue-wrapper__heading {
        top: 12vw;
        right: -5.3333333333vw
    }

    .epilogue-wrapper__heading .glitch-text {
        font-size: 9.6vw;
        letter-spacing: 0
    }

    .epilogue-wrapper__heading .glitch-text .big {
        font-size: 13.3333333333vw
    }

    .epilogue-wrapper__contents {
        width: 72vw;
        top: 53.6vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .epilogue-wrapper__contents-text p {
        font-size: 2.9333333333vw;
        line-height: 1.8em
    }

    .epilogue-wrapper__contents .btn {
        width: 72vw;
        height: 12vw
    }

    .epilogue-wrapper__contents .btn {
        margin: 4vw auto 0
    }

    .epilogue-wrapper__contents .btn div {
        font-size: 4vw
    }

    .epilogue._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg.3dd6171f.webp)
    }

    .epilogue._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/prologue_bg_light.b545c343.webp)
    }

    .notice {
        height: 260vw
    }

    .notice-wrapper__heading {
        top: 10.6666666667vw;
        left: 8vw
    }

    .notice-wrapper__heading .glitch-text {
        font-size: 13.3333333333vw;
        letter-spacing: 0
    }

    .notice-wrapper__date {
        top: 72.8vw;
        left: 0;
        width: 100%
    }

    .notice-wrapper__date .title {
        width: 100%;
        font-size: 4vw
    }

    .notice-wrapper__date .date {
        margin-top: 1.3333333333vw;
        font-size: 9.3333333333vw
    }

    .notice-wrapper__list {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        height: 190.6666666667vw;
        width: 100vw;
        top: 0;
        left: 50%;
        transform: translateX(-50%)
    }

    .notice-wrapper__list-item {
        display: flex;
        justify-content: center;
        width: 33.3vw;
        height: 95.3333333333vw
    }

    .notice-wrapper__list-item .text {
        width: 100%;
        font-size: 3.8666666667vw;
        bottom: 26vw
    }

    .notice-wrapper__list-item .btn {
        width: 27.2vw;
        height: 15.2vw
    }

    .notice-wrapper__list-item .btn {
        bottom: 10vw
    }

    .notice-wrapper__list-item .btn div {
        display: none;
        font-size: 4vw
    }

    .notice-wrapper__list-item:nth-child(5) .text {
        left: -.6666666667vw
    }

    .notice-wrapper__addendum {
        height: 70.6666666667vw
    }

    .notice-wrapper__addendum-heading {
        top: 15.3333333333vw;
        right: 0
    }

    .notice-wrapper__addendum-heading .glitch-text {
        font-size: 13.3333333333vw;
        letter-spacing: 0
    }

    .notice-wrapper__addendum-text {
        font-size: 3.7333333333vw;
        letter-spacing: 0;
        top: 28vw;
        left: 6.6666666667vw
    }

    .notice-wrapper__addendum .btn {
        width: 34.6666666667vw;
        height: 12vw
    }

    .notice-wrapper__addendum .btn {
        top: 34vw;
        right: 6.6666666667vw
    }

    .notice-wrapper__addendum .btn div {
        font-size: 4vw
    }

    .notice._back .notice-inner {
        flex-wrap: wrap;
        height: 190.6666666667vw
    }

    .notice._back .notice-inner__image:nth-child(1) {
        width: 33.3%;
        height: 95.3333333333vw
    }

    .notice._back .notice-inner__image:nth-child(2) {
        width: 33.3%;
        height: 95.3333333333vw
    }

    .notice._back .notice-inner__image:nth-child(3) {
        width: 33.3%;
        height: 95.3333333333vw
    }

    .notice._back .notice-inner__image:nth-child(4) {
        width: 33.3%;
        height: 95.3333333333vw
    }

    .notice._back .notice-inner__image:nth-child(5) {
        width: 33.3%;
        height: 95.3333333333vw
    }

    .notice._back .notice-inner__image:nth-child(6) {
        width: 33.3%;
        height: 95.3333333333vw
    }

    .notice._back .notice-inner__image:nth-child(1) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg1_on.606efb9f.webp)
    }

    .notice._back .notice-inner__image:nth-child(2) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg2_on.c19ce5af.webp)
    }

    .notice._back .notice-inner__image:nth-child(3) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg3_on.bcea6b1e.webp)
    }

    .notice._back .notice-inner__image:nth-child(4) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg4_on.a80a3a68.webp)
    }

    .notice._back .notice-inner__image:nth-child(5) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg5_on.a8e2e1f9.webp)
    }

    .notice._back .notice-inner__image:nth-child(6) .hover {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/notice_bg6_on.602b68b0.webp)
    }

    .report {
        height: 173.3333333333vw
    }

    .report-wrapper__heading {
        top: 12vw;
        left: 8vw
    }

    .report-wrapper__heading .glitch-text {
        font-size: 9.6vw;
        letter-spacing: .08em
    }

    .report-wrapper__heading .glitch-text .big {
        font-size: 13.3333333333vw;
        letter-spacing: .05em
    }

    .report-wrapper__btns {
        flex-wrap: wrap;
        width: 72.6666666667vw;
        right: 6vw;
        bottom: 22vw
    }

    .report-wrapper__btns a {
        width: 72.6666666667vw;
        height: 13.3333333333vw
    }

    .report-wrapper__btns a {
        margin-bottom: 2.6666666667vw
    }

    .report._back {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/report_bg.62e70548.webp)
    }

    .report._back::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/report_bg_light.ad859198.webp)
    }

    .product {
        height: 333.3333333333vw;
        margin-top: -100dvh
    }

    .product-wrapper__heading {
        top: 13.3333333333vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .product-wrapper__heading .glitch-text {
        font-size: 9.3333333333vw;
        letter-spacing: 0
    }

    .product-wrapper__contents {
        width: 89.3333333333vw;
        margin: 0 auto 0;
        padding-bottom: 6.6666666667vw;
        top: 32vw
    }

    .product-wrapper__contents .hr {
        margin: 8vw auto;
        width: 78.6666666667vw
    }

    .product-wrapper__contents-information {
        flex-wrap: wrap
    }

    .product-wrapper__contents-information .image {
        width: 37.6vw;
        height: 33.7333333333vw
    }

    .product-wrapper__contents-information .image {
        margin-top: 8.6666666667vw;
        margin-bottom: 7.3333333333vw;
        margin-left: auto;
        margin-right: auto
    }

    .product-wrapper__contents-information .details {
        margin-left: auto;
        margin-right: auto;
        width: 64vw
    }

    .product-wrapper__contents-information .details-title {
        font-size: 4.2666666667vw;
        margin-bottom: 4vw;
        white-space: nowrap;
        left: 50%;
        transform: translateX(-50%)
    }

    .product-wrapper__contents-information .details-item {
        font-size: 2.6666666667vw;
        margin-bottom: 2.6666666667vw
    }

    .product-wrapper__contents-information .details-item__title {
        width: 22vw;
        padding: 1.3333333333vw 0 1.0666666667vw;
        margin-right: 1.8666666667vw;
        min-height: 5.3333333333vw
    }

    .product-wrapper__contents-information .details-item__text {
        line-height: 1.5em
    }

    .product-wrapper__contents-information .details-btn {
        width: 64vw;
        height: 12vw
    }

    .product-wrapper__contents-information .details-btn {
        margin-top: 5.3333333333vw
    }

    .product-wrapper__contents-information .details-btn div {
        font-size: 4vw;
        line-height: 1.2em
    }

    .product-wrapper__contents-presents {
        letter-spacing: 0
    }

    .product-wrapper__contents-presents .title {
        font-size: 4.5333333333vw;
        letter-spacing: -0.05em
    }

    .product-wrapper__contents-presents .image {
        width: 76vw;
        height: 107.0666666667vw
    }

    .product-wrapper__contents-presents .image {
        margin: 2.6666666667vw auto 1.8666666667vw
    }

    .product-wrapper__contents-presents .text {
        font-size: 3.4666666667vw
    }

    .product-wrapper__contents-presents .text .small {
        font-size: 2.9333333333vw;
        margin-top: 2.6666666667vw
    }

    .product-wrapper__contents-presents .attention {
        margin-top: 3.4666666667vw;
        margin-left: 8vw;
        padding-right: 5.3333333333vw
    }

    .product-wrapper__contents-presents .attention-mark {
        margin-bottom: .4vw;
        line-height: 1.5em
    }

    .product-wrapper__contents-presents .attention-mark {
        font-size: 2.6666666667vw
    }

    .product-wrapper__contents::before {
        --height: 2.6666666667vw;
        height: var(--height);
        width: 100%;
        top: calc(var(--height)*-1)
    }

    .campaign {
        height: 216.6666666667vw;
        padding-bottom: 16vw
    }

    .campaign._green {
        height: 373.3333333333vw
    }

    .campaign-wrapper._green {
        margin-bottom: 0
    }

    .campaign-wrapper__heading {
        top: 12vw;
        left: 50%;
        transform: translateX(-50%)
    }

    .campaign-wrapper__heading .glitch-text {
        font-size: 9.3333333333vw;
        letter-spacing: 0
    }

    .campaign-wrapper__contents {
        top: 36vw
    }

    .campaign-wrapper__date-inner {
        font-size: 2.6666666667vw;
        height: 5.0666666667vw;
        padding: .9333333333vw 2.6666666667vw
    }

    .campaign-wrapper__date span {
        margin-right: 2.6666666667vw;
        padding-right: 2.6666666667vw
    }

    .campaign-wrapper__date span::after {
        top: .5333333333vw
    }

    .campaign-wrapper__end-text {
        font-size: 4.5333333333vw;
        line-height: 1.5em;
        width: 94.6666666667vw;
        height: 113.3333333333vw;
        top: 9.3333333333vw
    }

    .campaign-wrapper .details {
        flex-wrap: wrap;
        width: 89.3333333333vw;
        margin: 13.3333333333vw auto 0
    }

    .campaign-wrapper .details._story .details-list {
        height: auto
    }

    .campaign-wrapper .details-list {
        width: 89.3333333333vw;
        height: auto;
        padding-bottom: 5.3333333333vw;
        margin-bottom: 9.3333333333vw
    }

    .campaign-wrapper .details-list .step {
        font-size: 4.5333333333vw;
        letter-spacing: .1em;
        top: -8.1333333333vw;
        left: 2.6666666667vw
    }

    .campaign-wrapper .details-list .step-number {
        font-size: 7.0666666667vw;
        margin-left: .8vw
    }

    .campaign-wrapper .details-list .description {
        width: 58.6666666667vw;
        font-size: 3.2vw;
        line-height: 1.5em;
        padding: 0 5.0666666667vw;
        margin-top: 4.8vw
    }

    .campaign-wrapper .details-list .description .small {
        font-size: 2.6666666667vw
    }

    .campaign-wrapper .details-list .image {
        position: absolute;
        right: 5.3333333333vw;
        top: -5.3333333333vw
    }

    .campaign-wrapper .details-list .image._icon {
        width: 21.8666666667vw;
        height: 21.8666666667vw
    }

    .campaign-wrapper .details-list .image._phone {
        width: 13.8666666667vw;
        height: 23.0666666667vw
    }

    .campaign-wrapper .details-list .image._phone {
        top: -6.6666666667vw;
        right: 6.2666666667vw
    }

    .campaign-wrapper .details-list .image._sign {
        width: 19.2vw;
        height: 21.2vw
    }

    .campaign-wrapper .details-list .image._sign {
        top: -1.3333333333vw;
        right: 3.7333333333vw
    }

    .campaign-wrapper .details-list .image._story-icon {
        width: 24vw
    }

    .campaign-wrapper .details-list .image._story-phone {
        width: 13.3333333333vw
    }

    .campaign-wrapper .details-list .image._story-prize {
        width: 30.8vw;
        height: 28.8vw
    }

    .campaign-wrapper .details-list .image._story-prize {
        top: -5.3333333333vw;
        right: 3.7333333333vw
    }

    .campaign-wrapper .details-list .btn {
        width: 64vw;
        height: 12vw
    }

    .campaign-wrapper .details-list .btn {
        position: relative;
        margin: 5.3333333333vw auto 0
    }

    .campaign-wrapper .details-list .btn div {
        font-size: 4vw;
        line-height: 1.5em
    }

    .campaign-wrapper .details-list::before {
        --height: 2.6666666667vw
    }

    .campaign-wrapper .details-list:last-child {
        margin-bottom: 0
    }

    .campaign-wrapper__review {
        margin: 12vw auto;
        width: 89.3333333333vw
    }

    .campaign-wrapper__review-title {
        font-size: 4.8vw;
        letter-spacing: .1em;
        top: -6.1333333333vw;
        left: 1.3333333333vw
    }

    .campaign-wrapper__review-inner {
        padding: 6.6666666667vw 5.3333333333vw 5.3333333333vw
    }

    .campaign-wrapper__review-inner .list-item {
        width: 78.6666666667vw;
        height: 15.0666666667vw
    }

    .campaign-wrapper__review-inner .list-item {
        margin: 0 auto 4vw
    }

    .campaign-wrapper__review-inner .list-item:last-child {
        margin-bottom: 2.6666666667vw
    }

    .campaign-wrapper__review-inner .list-item div {
        font-size: 4vw;
        line-height: 1.5em
    }

    .campaign-wrapper__review-inner .attention {
        font-size: 2.6666666667vw
    }

    .campaign-wrapper__review::before {
        --height: 2.6666666667vw
    }

    .campaign-wrapper__terms {
        margin-top: 8vw
    }

    .campaign-wrapper__terms .title {
        font-size: 4vw;
        margin-bottom: 2.6666666667vw
    }

    .campaign-wrapper__terms .terms-inner {
        width: 89.3333333333vw;
        height: 33.3333333333vw;
        padding: 3.3333333333vw 2.1333333333vw 3.2vw 5.3333333333vw;
        font-size: 1.8666666667vw
    }

    .campaign-wrapper__terms .terms-inner__text::-webkit-scrollbar {
        height: .2666666667vw
    }

    .campaign-wrapper__terms .terms-inner__text {
        height: 27.3333333333vw;
        padding-right: 3.4666666667vw;
        line-height: 1.5em
    }

    .camera-wrapper__frame::before,
    .camera-wrapper__frame::after {
        width: 15.0666666667vw;
        height: 21.3333333333vw;
        --range: 2.6666666667vw
    }

    .camera-wrapper__frame::before {
        left: var(--range)
    }

    .camera-wrapper__frame::after {
        right: var(--range)
    }

    .camera-wrapper__frame._upper::before,
    .camera-wrapper__frame._upper::after {
        top: 5.3333333333vw
    }

    .camera-wrapper__frame._bottom::before,
    .camera-wrapper__frame._bottom::after {
        bottom: 0
    }

    .camera-wrapper__meter {
        width: 2.8vw;
        height: 29.8666666667vw
    }

    .camera-wrapper__meter {
        left: 2.6666666667vw;
        background-image: url(/special/bp-18-special-site/bp18/assets/images/meter.0a727bcf.svg)
    }

    .camera-wrapper__meter-point {
        width: 1.6vw;
        height: 2.4vw
    }

    .camera-wrapper__meter-point {
        top: -1.0666666667vw;
        left: 3.4666666667vw;
        background-image: url(/special/bp-18-special-site/bp18/assets/images/meter_point.60f8f75c.svg)
    }

    .camera-wrapper__meter-point[data-id=world] {
        top: -1.0666666667vw
    }

    .camera-wrapper__meter-point[data-id=chara] {
        top: 6.4vw
    }

    .camera-wrapper__meter-point[data-id=report] {
        top: 13.8666666667vw
    }

    .camera-wrapper__meter-point[data-id=prologue] {
        top: 21.0666666667vw
    }

    .camera-wrapper__meter-point[data-id=story] {
        top: 28.2666666667vw
    }

    .camera-wrapper__battery {
        bottom: 16vw;
        right: 6.6666666667vw;
        width: 8.4vw;
        height: 3.4666666667vw
    }

    .camera-wrapper__size {
        bottom: 16vw;
        left: 5.3333333333vw;
        font-size: 3.0666666667vw
    }

    .camera-wrapper__size ._w {
        margin-right: 0
    }

    .camera-frame {
        top: 12vw;
        height: calc(100dvh - 5.3333333333vw)
    }

    .main-maskbg {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/bg_pattern.c8b38b2c.webp);
        background-size: 12.8vw;
        background-repeat: repeat
    }

    .others {
        margin-top: -5.3333333333vw
    }

    .others {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/product_bg.a8ea1800.webp)
    }

    .others._campaign {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/campaign_bg.376dc67a.webp)
    }

    .others::before {
        background-image: url(/special/bp-18-special-site/bp18/assets/images/bg_pattern.c8b38b2c.webp);
        background-size: 12.8vw;
        background-repeat: repeat
    }

    #c-modal .c-modal__body {
        margin-top: 13.3333333333vw
    }

    #c-modal .c-modal__contents__close {
        width: 6.6666666667vw;
        height: 6.6666666667vw;
        top: -9.3333333333vw;
        right: 0
    }

    #c-modal .c-modal__contents__close span {
        width: 9.3333333333vw
    }

    #c-modal .c-modal-movie {
        width: 85.3333333333vw;
        height: 49.2vw
    }

    #c-modal .c-modal-image {
        width: 90.6666666667vw;
        max-width: 100%
    }
}