@charset "UTF-8";
@import url('assets/css/animation.css');
@font-face {
    font-family: "Songti SC";
    font-style: normal;
    font-weight: 400;
    src: url(assets/fonts/songti_sc.ttf) format("opentype");
    font-display: swap;
}

.image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.image-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.image-holder img {
    object-position: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .30s;
}

.skeleton-bg {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==) no-repeat center/2.08vw
}

p {
    margin: 0 0 0.69vw;
}

p:last-child {
    margin-bottom: 0;
}

.slide-wrap {
    position: relative;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: "Noto Sans JP", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    background: #000;
    color: #fff;
    overflow-x: hidden;
}

.container {
    position: relative;
    width: 100%;
    max-width: 76.39vw;
    margin-right: auto;
    margin-left: auto;
}

.l-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.88vw;
}

.l-social__link {
    display: flex;
    transition: all .3s;
}

.l-social__link:hover {
    opacity: .7;
}

.l-social__link.youtube svg {
    width: 2.53vw;
    height: 1.78vw;
}

.l-social__link.x svg {
    width: 2.47vw;
    height: 2.47vw;
}

.noise {
    background: url(./assets/images/noise.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    mix-blend-mode: difference;
    pointer-events: none;
}

@keyframes fadeanm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeoffanm {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scaleanm {
    0% {
        transform: scale(1.1, 1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes scaleanm2 {
    0% {
        transform: scale(1.1, 1.1);
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes hurueru {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(0.14vw, 0.07vw);
    }

    50% {
        transform: translate(-0.07vw, 0.14vw);
    }

    75% {
        transform: translate(0.14vw, 0);
    }

    100% {
        transform: translate(0, 0.07vw);
    }
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes fadeinup {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2.08vw, 0);
        transform: translate3d(0, 2.08vw, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ef {
    visibility: hidden;
    animation-name: none;
}

.ef.ef-init {
    visibility: visible;
    animation-name: fadeinup;
    animation-duration: .7s;
}

#l-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF80;
    opacity: 0;
    visibility: hidden;
    transition: opacity .30s ease, visibility .30s ease, transform .30s ease;
}

#l-loader__icon {
    width: 4.17vw;
    height: 4.17vw;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 0.14vw solid #ddd;
    border-top-color: #D8271F;
    background: transparent;
    animation: spin 1s linear infinite;
}

body.loading #l-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    pointer-events: unset;
}

/* Header.css */

.l-social-fixed {
    position: fixed;
    z-index: 100;
    top: 1.60vw;
    left: 1.94vw;
}

.l-social-fixed .l-social {
    gap: 0.35vw;
}

.l-social-fixed .l-social__link {
    width: 4.44vw;
    height: 4.44vw;
    align-items: center;
    justify-content: center;
    background: #D8271F;
}

.l-social-fixed .l-social__link:hover {
    opacity: 1;
    background: #B10800;
}

.l-menu-trigger {
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    border: 1px solid #383838;
    cursor: pointer;
    transition: all .3s;
}

.l-menu-trigger:hover {}

body.menu-open .l-menu-trigger {
    border: 1px solid #fff;
}

.l-menu-trigger__span {
    position: relative;
    width: 23px;
    height: 20px;
}

.l-menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    width: 100%;
    height: 0.14vw;
    background-color: #383838;
    border-radius: 0.21vw;
    transition: all .5s;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .l-menu-trigger span {}

.l-menu-trigger span:nth-of-type(1) {
    top: 0;
}

body.menu-open .l-menu-trigger span:nth-of-type(1) {
    transform: translateY(10px) rotate(-45deg);
    width: 23px;
    background-color: #fff;
}

.l-menu-trigger span:nth-of-type(2) {
    top: 9px;
    width: 23px;
}

body.menu-open .l-menu-trigger span:nth-of-type(2) {
    opacity: 0;
}

.l-menu-trigger span:nth-of-type(3) {
    bottom: 0;
    width: 23px;
}

body.menu-open .l-menu-trigger span:nth-of-type(3) {
    transform: translateY(-8px) rotate(45deg);
    width: 23px;
    background-color: #fff;
}

.l-offcanvas-menu {
    border-radius: 30px 0 0 30px;
    background: rgba(26, 135, 199, 0.40);
    backdrop-filter: blur(17px);
    width: 351px;
    height: 100%;
    padding: 0 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
    transform: translate(34.17vw);
    transition: all .5s;
    overflow-y: auto;
}

body.menu-open .l-offcanvas-menu {
    transform: translateZ(0);
}

.l-offcanvas-menu-wrap {
    position: relative;
    padding-top: 166px;
    padding-left: 80px;
    width: auto;
    z-index: 1;
}

.l-main-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.l-main-menu ul li a {
    display: block;
    color: #FFF;
    font-family: "Songti SC";
    font-size: 2.22vw;
    font-style: normal;
    text-decoration: none;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.04vw;
    white-space: nowrap;
    transition: all .3s;
    text-transform: uppercase;
}

.l-main-menu ul li a:hover {
    color: #A8D5FF;
    transition: all 0.5s ease;
}

.l-main-menu ul>li {
    margin-bottom: 2.78vw;
}

.l-offcanvas-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3.06vw;
}

.l-offcanvas-bottom a {
    color: #FFF;
    text-align: center;
    font-family: "Zen Old Mincho";
    font-size: 1.04vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.l-info-menu {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.l-info-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.shop-menu-item {
    padding-left: 25px;
    margin-top: 17px;
    margin-left: 18px;
    border-left: 1px solid #fff;
    display: none;
    /* Ẩn mặc định - jQuery sẽ điều khiển */
    overflow: hidden;
}

.shop-menu-item a {
    font-size: 20px !important;
    margin-bottom: 16px;
}

/* Section */

.l-section {
    position: relative;
}

/* header */

.l-header {
    position: fixed;
    z-index: 99;
    top: 0;
    width: 100%;
}

.l-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 32px 0;
    width: auto;
}

.l-header__logo {
    width: 238.771px;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
}

.l-header__logo img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

/* Banner */

.l-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
}

.l-banner__heading {
    position: absolute;
    z-index: 1;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    width: 66.137566vw;
    height: auto;
}

.l-banner__heading-descript {}

.l-banner__heading-descript p.firstp {
    font-size: 1.81vw;
    line-height: 2.57vw;
    letter-spacing: -0.22vw;
    margin-top: 2.64vw;
    margin-bottom: 0.83vw;
}

.l-banner__heading-descript p:last-child {
    margin: 0;
}

.l-banner__image-titlev {
    position: absolute;
    z-index: 1;
    top: 11.46vw;
    right: 6.88vw;
    width: 3.19vw;
    height: auto;
    animation: scaleanm2 2s ease 1s forwards;
    opacity: 0;
}

.l-banner__image-titlev img {
    animation: hurueru .2s infinite;
}

.l-banner__time {
    position: absolute;
    bottom: 6.04vw;
    left: 50%;
    transform: translateX(-50%);
    width: 51.74vw;
    text-align: center;
    z-index: 10;
}

.l-banner__time-wrap {
    animation: scaleanm2 2s ease 1.5s forwards;
    opacity: 0;
}

.l-banner__time p.firstp {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-size: 2.43vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05vw;
    margin-top: 1.53vw;
}

.l-banner__time p.firstp span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.22vw;
    height: 2.22vw;
    border: 0.07vw solid #fff;
    border-radius: 50%;
    font-size: 1.39vw;
    line-height: 1;
    font-weight: 900;
}

.l-banner__time p.firstp small {
    font-size: 1.81vw;
    letter-spacing: 0.04vw;
}

.l-banner__time p.lastp {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-size: 1.39vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08vw;
    margin-bottom: 1.53vw;
}

.l-banner__time span.line {
    display: block;
    background: url(./assets/images/banner_top_line.png) no-repeat center;
    width: 100%;
    height: 0.14vw;
}

.l-banner {
    background: url(./assets/images/banner.png) no-repeat center;
    background-size: cover;
    animation: scaleanm2 0s cubic-bezier(.03, .54, .56, .99) 0s forwards;
    opacity: 0;
    height: 100vh;
    width: 100%;
}

.top-concept {
    background: url(./assets/images/TOP-CONCEPT.png) no-repeat center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.l-concept {
    background: url(./assets/images/CONCEPT.png) no-repeat center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.l-concept__content {
    position: absolute;
    top: 14%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.l-concept__content h2 {
    color: #FFF;
    text-align: center;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.65);
    font-family: "Songti SC";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px;
    margin-top: 0;
    margin-bottom: -50px;
}

.l-concept-desc {
    color: #383838;
    font-weight: 400;
    margin-top: 30px;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: center;
}

.l-concept__butterfly.l-img {
    position: absolute;
    top: 40%;
    left: 6%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-concept__butterfly1.l-img {
    position: absolute;
    top: 32%;
    right: 7%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-banner__products {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    height: auto;
    width: 21.8253968vw;

}

.l-banner__products-item.l-img {
    animation: mv_fuwa 3900ms infinite cubic-bezier(.455, .03, .515, .955);
}

.l-banner__butterfly.l-img {
    position: absolute;
    top: 140px;
    left: 55px;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-banner__butterfly2.l-img {
    position: absolute;
    bottom: 32%;
    right: 16%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-banner__desc-img.l-img {
    width: 534.192px;
    height: 128.864px;
    position: absolute;
    bottom: 271px;
    left: 75px;
    z-index: 2;
}

.l-info-menu-item a {
    color: #fff;
    text-decoration: unset;
}

.l-banner__layer {
    mix-blend-mode: hard-light;
    width: 100%;
    background: conic-gradient(from 180deg at 100% 66%, #C59791 43.04844081401825deg, #7C8690 199.84126567840576deg);
    mix-blend-mode: hard-light;
    flex-shrink: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    height: 100%;
}

.l-banner-star-item1.l-img {
    position: absolute;
    top: 27%;
    left: 16%;
    width: 54px;
    height: auto;
    z-index: 9;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-banner-star-item2.l-img {
    position: absolute;
    top: 10%;
    left: 25%;
    width: 74px;
    height: auto;
    z-index: 9;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-banner-star-item3.l-img {
    position: absolute;
    top: 5%;
    right: 28%;
    width: 64px;
    height: auto;
    z-index: 9;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-banner-star-item4.l-img {
    position: absolute;
    top: 19%;
    right: 8%;
    width: 109px;
    height: auto;
    z-index: 9;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}


.l-banner__layer1.l-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    z-index: 9;
}

.banner_btn.l-img {
    position: absolute;
    bottom: 16%;
    left: 56%;
    width: 15.8068vw;
    height: auto;
    z-index: 99999;

}

.ellipse-lbanner {
    position: absolute;
    border-radius: 282.973px;
    background: rgba(126, 140, 149, 0.40);
    mix-blend-mode: plus-lighter;
    box-shadow: 0 0 44px 7px #873400;
    filter: blur(0.5px);
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.ellipse-lbanner.ellipse1.l-img {
    right: 15%;
    top: 18%;
    fill: rgba(206, 160, 74, 0.40);
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 44px #873400) blur(0.5px);
    width: 162.588px;
    height: 119.471px;
    transform: rotate(-22.314deg);
}

.ellipse-lbanner.ellipse2.l-img {
    fill: rgba(126, 140, 149, 0.60);
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 124px #EE823F) blur(0.5px);
    width: 148.158px;
    height: 84.052px;
    transform: rotate(-22.314deg);
    top: 5%;
    left: 36%;
}

.ellipse-lbanner.ellipse3.l-img {
    top: 28%;
    left: 20%;
}

.ellipse-lbanner.ellipse4.l-img {
    width: 122.608px;
    height: 56.294px;
    transform: rotate(-22.314deg);
    fill: rgba(126, 140, 149, 0.40);
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 44px #873400) blur(0.5px);
    bottom: 39%;
    left: 22%;
}

.ellipse-lbanner.ellipse5.l-img {
    width: 93.077px;
    height: 68.394px;
    transform: rotate(-22.314deg);
    fill: rgba(126, 140, 149, 0.40);
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 44px #873400) blur(0.5px);
    bottom: 23%;
    left: 38%;
}

.ellipse-lbanner.ellipse6.l-img {
    width: 94.127px;
    height: 53.4px;
    transform: rotate(-22.314deg);
    fill: rgba(126, 140, 149, 0.60);
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 124px #EE823F) blur(0.5px);
    bottom: 22%;
    left: 43%;
}

.ellipse-lbanner.ellipse7.l-img {
    width: 282.973px;
    height: 129.925px;
    transform: rotate(-22.314deg);
    border-radius: 282.973px;
    background: rgba(126, 140, 149, 0.40);
    mix-blend-mode: plus-lighter;
    box-shadow: 0 0 44px 7px #873400;
    filter: blur(0.5px);
    bottom: 20%;
    left: 46%;
}

.ellipse-lbanner.ellipse8.l-img {
    width: 66.811px;
    height: 56.294px;
    transform: rotate(-22.314deg);
    fill: rgba(126, 140, 149, 0.40);
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 44px #873400) blur(0.5px);
    bottom: 18%;
    left: 23%;
}

.flower-bn {}

.flower-item.l-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 31.547vw;
    height: auto;
    animation: mv_fuwa 2900ms infinite cubic-bezier(.455, .03, .515, .955);
}

.flower-item2.l-img {
    position: absolute;
    bottom: 0;
    left: 28%;
    width: 662px;
    height: auto;
    animation: mv_fuwa 2900ms infinite cubic-bezier(.455, .03, .515, .955);
}

.flower-item3.l-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 33.26719vw;
    height: auto;
    animation: mv_fuwa 2900ms infinite cubic-bezier(.455, .03, .515, .955);
}

@keyframes boyon2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8);
    }
}

@keyframes star {
    0% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    50% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}

@keyframes mv_fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(0, 3%, 0);
        -moz-transform: translate3d(0, 3%, 0);
        -o-transform: translate3d(0, 3%, 0);
        -ms-transform: translate3d(0, 3%, 0);
        transform: translate3d(0, 3%, 0);
    }
}

/* topic */
.l-topic {
    background: url(./assets/images/TOPIC_bg.png) no-repeat center;
    background-size: cover;
    width: 100%;
    padding: 145px 0 100px;
    z-index: 3;
}

.l-topic__title.l-img {
    position: relative;
    height: auto;
    z-index: 2;
    width: 372px;
    margin: 0 auto 40px;
}

.l-topic-container {
    margin: 0 85px;
    height: 100%;
    position: relative;
}

.topic-content {
    position: relative;
    width: 100%;
}

.l-topic-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
}

.l-topic-item {
    border-radius: 10px;
    background: linear-gradient(159deg, rgba(230, 230, 230, 0.20) 7.1%, rgba(197, 197, 197, 0.10) 95.15%);
    box-shadow: 0 4px 9px 0 rgba(149, 169, 181, 0.60);
    backdrop-filter: blur(1.5px);
    border-radius: 10px;
    border: 2px solid rgba(203, 214, 224, 0.60);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.l-topic-date {
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(152, 163, 185, 0.80) 0%, rgba(138, 147, 164, 0.80) 100%);
    width: fit-content;
    color: #fff;
    text-align: center;
    font-family: "Songti SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    padding: 2px 8px;
}

.l-topic-content {
    line-height: 27px;
    letter-spacing: 0.42px;
    color: #383838;
    font-weight: 500;
}

.l-topic-btn {
    text-align: right;
}

.l-topic-btn a {
    color: #7A8599;
    text-align: center;
    font-family: "Songti SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-align: right;
    margin: 0;
}

.l-topic-item.text-center {
    color: #7A8599;
    text-align: center;
    font-family: "Songti SC";
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px;
    align-items: center;
    justify-content: center;
}

.l-topic .l-topic-item:nth-child(even) {
    transform: translateY(66px);
}

.l-topic-btn.list {
    margin-top: 86px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
}

.l-topic-btn.list a {
    color: #383838;
    text-align: center;
    font-family: "Songti SC";
    font-size: 23px;
    text-decoration-line: unset;
    font-style: normal;
    font-weight: 400;
    line-height: 49px;
    letter-spacing: 1.38px;
}

/* l-product */
.l-product {
    background: url('./assets/images/PRODUCT_bg.png') no-repeat center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    z-index: 4;
}

.l-product__title.l-img {
    width: auto;
    height: auto;
    position: absolute;
    top: 12%;
    left: 3%;
    z-index: 2;
}

.l-prod-desc {
    position: absolute;
    top: 15%;
    right: 5%;
    width: 524px;
    height: auto;
    z-index: 1;
}

.l-product__item-list {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
}

.l-product__item-list img {
    width: 10.44973vw;
}


.l-product__item1.l-img {
    position: absolute;
    left: 21%;
    top: 26%;
    z-index: 2;
    transition: all 0.5s ease;
    width: 35.84656vw;
}

.l-product__item1.l-img:hover {
    z-index: 5;
    transform: rotate(8.543deg);
    left: 19%;
    top: 24%;
    transition: all 0.5s ease;
    filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));

}

.l-product__item2.l-img {
    position: absolute;
    left: 36.5%;
    top: 30%;
    z-index: 3;
    transition: all 0.5s ease;
    width: 15.2251vw;
}

.l-product__item2.l-img:hover {
    transform: rotate(-5.457deg);
    transition: all 0.5s ease;
    left: 37.5%;
    z-index: 5;
    filter: drop-shadow(2px 2px 10px rgba(255, 255, 255, 1));
}

.l-product__item3.l-img {
    position: absolute;
    top: 21.5%;
    left: 42%;
    z-index: 3;
    transition: all 0.5s ease;
    width:22.48677vw ;
}



.l-product__item3.l-img:hover {
    transform: rotate(-5.457deg);
    transition: all 0.5s ease;
    top: 21%;
    left: 43%;
    filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));

}

.l-product__item4.l-img {
    position: absolute;
    top: 21%;
    left: 48%;
    z-index: 2;
    transition: all 0.3s ease;
    width: 26.32275vw;
}

.l-product__item4.l-img:hover {
    transform: rotate(-5.457deg);
    transition: all 0.5s ease;
    z-index: 4;
    top: 19%;
    left: 48%;
    filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));

}

.l-prod_star1 {
    position: absolute;
    top: 12%;
    right: 21%;
    animation: star 1500ms linear infinite, boyon2 1500ms ease infinite;
}

.l-prod_star2 {
    position: absolute;
    top: 4%;
    left: 28%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-prod_star3 {
    position: absolute;
    top: 42%;
    left: 13%;
    animation: star 1500ms linear infinite, boyon2 1500ms ease infinite;
}

.l-prod_star4 {
    position: absolute;
    bottom: 9%;
    left: 32%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-prod_star5 {
    position: absolute;
    bottom: 20%;
    right: 28%;
    animation: star 1500ms linear infinite, boyon2 1500ms ease infinite;
}

.l-prod_star6 {
    position: absolute;
    top: 43%;
    right: 11%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.icon-popup {
    position: absolute;
    bottom: 40px;
    z-index: 2;
    left: -2%;
}

.l-product-detail__wrap {
    display: flex;
    gap: 83px;
}


.l-product-detail__content-title {
    color: #FFF;
    text-shadow: 0 0 10px #FFF;
    font-family: "Songti SC";
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 49px;
}

.popup-1 .l-product-detail__content {
    justify-content: center;
}

.l-product-detail__content {
    align-items: start;
    display: flex;
    flex-direction: column;
}

.l-product-detail__content-desc {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.l-product-detail__content-btn a {
    padding: 15px 20px;
    width: 100%;
    display: block;
    text-align: center;
    color: #383838;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.2px;
    border-radius: 7px;
    background: #FFF;
    margin-top: 50px;
}

/* 購入ボタンのデザイン（PC） - Figma仕様 */
.l-product-detail__content-btn a.purchase-btn {
    border-radius: 7px;
    background: linear-gradient(180deg, #FFF 0%, #E5E5E5 67.29%) !important;
    box-shadow: 0 0 14px 0 rgba(161, 161, 161, 0.70);
    color: #5A6570 !important;
    font-family: "Noto Sans JP" !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-align: center;
}

.l-product-detail__content-btn {
    width: 100%;
}

.easy-popup-content {
    padding: 120px 130px;
    border-radius: 20px;
    background: url('./assets/images/bg_popup.png') no-repeat center;
    background-size: 100% 100%;
    flex-shrink: 0;
}

.img-popup {
    height: 32.407407vw;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #fff;
}

.img-popup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.easy-popup-container {
    max-width: 1400px;
}

.easy-popup-master {
    --ep-bg: 1;
}

.ep-close-button {
    top: 10%;
    right: 2%;
    width: 54px;
    height: 54px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.l-product-detail__img {
    display: block;
    overflow: hidden;
    max-width: 490px;
}

.new-popup {
    position: absolute;
    top: 11%;
    z-index: 2;
    left: 6%;
}

.desc-popup {
    position: absolute;
    bottom: 12%;
    z-index: 2;
    left: 23%;
}

.btn-group {
    display: flex;
    gap: 11px;
}

.l-product-detail__content-btn:nth-child(1) a {
    width: 318px;
    border-radius: 7px;
    background: #D7D7D7;
    color: #fff;
    font-size: 20px;
    text-decoration: unset;
}

.l-product-detail__content-btn:nth-child(2) a {
    border-radius: 7px;
    background: #D7D7D7;
    color: #FFF;
    text-align: center;
    font-family: "Songti SC";
    font-size: 20px;
    text-decoration: unset;
    font-style: normal;
}

.l-product-detail__content-btn {}

.popup-3 .icon-popup {
    position: absolute;
    bottom: 11%;
    z-index: 2;
    left: 3%;
}

.price {
    font-size: 28px;
    margin-bottom: 25px;
    font-family: "Iowan Old Style";
}

.price span {
    font-size: 15px;
}

.content-detail_prod {
    line-height: 25px;
    letter-spacing: 0.84px;
}

.Capacity {
    margin: 8px 0;
}

.popup-3 .l-product-detail__content {
    justify-content: start;
}

.star-popup1 {
    position: absolute;
    top: 2%;
    z-index: 2;
    left: 2%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.star-popup2 {
    position: absolute;
    bottom: 9%;
    z-index: 2;
    right: 20%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.popup-4 .icon-popup {
    left: 0;
}

/* movie */

.l-movie {
    background: url('./assets/images/bg-movie.png') no-repeat center center;
    background-size: cover;
    padding: 9.933775vw 5.298013vw;
    z-index: 5;
}

.movie-swiper.swiper {
    width: 23.973510vw;
    height: 22.251656vw;
    transform-style: preserve-3d;
}

.l-buy .l-banner__layer {
    background: url('./assets/images/layer-movie.png') no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.l-movie-content {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.movie-content-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.movie-content-left {
    width: 63.1125827vw;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 953 / 705;
    border-radius: 30px;
    border: 3px solid #FFF;
    background: #D9D9D9;
    box-shadow: 0 4px 24px 0 rgba(255, 255, 255, 0.25);
    text-align: center;
    align-content: center;
    color: #7A8599;
    text-align: center;
    font-family: "Songti SC";
    font-size: 20px;
    font-style: normal;
    line-height: 49px;
    text-transform: uppercase;
    overflow: hidden;
}

.movie-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 27px;
}

.l-move-title {
    position: absolute;
    top: 0%;
    left: 0;
}

/* Swiper pagination custom */
.swiper-pagination {
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    opacity: 1;
    background-image: url('./assets/images/pagination-popup.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    filter: brightness(0) invert(1);
}

.movie-img {
    position: relative;
}

.icon-star-movie {
    position: absolute;
    top: 16%;
    right: 6%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.l-move-desc {
    position: absolute;
    bottom: 8%;
    right: 14%;
    z-index: 1;
}

.l-buy {
    background: url('./assets/images/bg-Buy.png') no-repeat center;
    background-size: cover;
    padding: 100px 145px 350px;
    text-align: center;
    z-index: 6;
}

.l-buy-content-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.l-buy-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.l-buy-content-item {
    border-radius: 10px;
    border: 1px solid #FFF;
    background: linear-gradient(180deg, #CCE4F4 -8.23%, #84AED2 86.77%);
    box-shadow: 0 1px 8px 0 rgba(141, 141, 141, 0.25);
    color: #FFF;
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.25);
    font-family: "Songti SC";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px;
    letter-spacing: 1.8px;
    padding: 20px;
    margin-top: 60px;
}

.l-buy-content-item a {
    color: #FFF;
}

.l-buy .flower-item.l-img {
    bottom: 2%;
    width: 353px;
}

.l-buy .flower-item3.l-img {
    width: 370px;
    bottom: 2%;
}

.person-buy {
    position: absolute;
    bottom: 164px;
    left: 50%;
    transform: translateX(-50%);
}

.butterfly-buy1 {
    position: absolute;
    top: 10%;
    left: 5%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.butterfly-buy2 {
    position: absolute;
    bottom: 8%;
    left: 54%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

.butterfly-buy3 {
    position: absolute;
    right: 5%;
    top: 27%;
    animation: star 2000ms linear infinite, boyon2 2000ms ease infinite;
}

/* page topic */

.cat-topic {
    background: url('./assets/images/bg-cat-topic.png') no-repeat center;
    background-size: cover;
    height: auto;
    width: 100%;
}

.detail-topic {
    background: url('./assets/images/detail-topic.png') no-repeat center;
    background-size: cover;
    height: auto;
    width: 100%;
}

/* Footer */

div#content {
    position: relative;
}

.l-buy .iconpage {
    position: absolute;
    bottom: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 90%;
}

.l-footer {
    position: absolute;
    z-index: 9;
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(17px);
    padding: 50px 0;
    color: #383838;
    width: 100%;
    left: 0;
    bottom: 0;
}

.container-ft {
    padding: 0 50px;
}

.logo-ft img {
    width: 210px;
    object-fit: cover;
    height: auto;
}

.l-footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.l-footer__heading-image {
    width: 13.89vw;
    height: auto;
}

.l-footer__policy {
    margin: 0.69vw 0 1.88vw;
}

.l-footer__policy a {
    color: #FFF;
    text-align: center;
    font-size: 1.04vw;
    font-style: normal;
    font-weight: 700;
    line-height: 2.01vw;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.l-footer__policy a {
    font-size: 13px;
    color: #383838;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
}

.l-footer__policy a:first-child {
    padding-right: 15px;
}

.l-footer__policy a:not(:first-child) {
    padding: 0 15px;
    border-left: 1px solid #383838;
}

.copyright {
    color: #383838;
    text-align: center;
    font-family: "Istok Web";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 49px;
    letter-spacing: 1.3px;
    position: fixed;
    z-index: 10;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.iconpage {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 90%;
}

.iconpage img {
    width: 100%;
    height: auto;
}

/* Cursor Trail Effect */
.cursor-particle-effect {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

canvas.particle-canvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: blur(0.6px) saturate(0.9);
    mix-blend-mode: screen;
}

.d-none {
    display: none;
}



@media (min-width: 1025px) {
    .icon-menu {
        display: none;
    }

    .flower-bn-mb {
        display: none;
    }

    .mb {
        display: none !important;
    }

    /* vw */

    
}

@media (max-width: 1880px) and (min-width:1700px ) {

}

@media (max-width: 1920px) and (min-width:1700px ) {
    .l-banner__desc-img.l-img {
        bottom: 26%;
        left: 13%;
    }

    .l-offcanvas-menu-wrap {
        padding-top: 100px;
        padding-left: 60px;
    }

    .l-main-menu ul>li {
        margin-bottom: 30px;
    }
    .l-main-menu ul li a {
        font-size: 30px;
    }

    .easy-popup-content {
        padding: 70px 100px;
    }

    .ep-close-button {
        top: 10%;
        right: 5%;
    }
}

@media (max-width: 1199px) and (min-width: 1025px) {
    .movie-content-left {
        border-radius: 20px;
        overflow: hidden;
    }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    .ep-close-button {
        top: 10%;
        right: 3%;
        width: 45px;
        height: 45px;
    }

    .l-product__title.l-img img {
        width: 80%;
    }

    .icon-popup.pc img {
        width: 60%;
    }

    .l-prod-desc {
        right: 10%;
        width: 400px;
    }
    .l-product-detail__content-btn:nth-child(1) a {
        width: 180px;
    }

    .l-product-detail__content-btn a {
        margin-top: 30px;
        padding: 10px 20px;
    }

    .l-banner__heading {
        height: auto;
    }

    .l-banner__desc-img.l-img {
        width: 450px;
        bottom: 24%;
        left: 10%;
        z-index: 2;
    }

    .l-topic-item {
        padding: 15px;
    }

    .l-topic-content {
        font-size: 12px;
    }

    .content-detail_prod {
        font-size: 12px;
        line-height: normal;
    }

    .l-concept-desc {
        margin-top: 0;
    }

    .l-concept__content h2 {
        margin-bottom: -30px;
    }

    .price {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .l-product-detail__content-btn a {
        margin-top: 30px;
    }

    .l-concept__title img {
        width: 600px;
    }

    .l-offcanvas-menu-wrap {
        padding-top: 60px !important;
        padding-left: 60px;
    }

    .l-main-menu ul>li {
        margin-bottom: 30px;
    }
    .l-main-menu ul li a {
        font-size: 22px !important;
    }

    .easy-popup-content {
        padding: 50px 80px;
        border: 0;
    }

    .l-product-detail__img {
        max-width: 440px;
    }

    .l-product-detail__wrap {
        gap: 60px;
        justify-content: center;
    }

    .easy-popup-container {
        max-width: 90%;
    }

    .ep-close-button {
        top: 10%;
        right: 3%;
        width: 45px;
        height: 45px;
    }

 
}

@media (max-width: 1700px) and (min-width: 1537px) {
.l-offcanvas-menu-wrap {
    padding-top: 80px;
    padding-left: 60px;
}
.l-main-menu ul li a {
    font-size: 26px;
}
.l-main-menu ul>li {
    margin-bottom: 30px;
}

.l-banner__desc-img.l-img {
   
    bottom: 20%;
    left: 11%;

}
}

@media (max-width: 1536px) and (min-width: 1441px) {

    .l-banner__heading {
        height: auto;
    }

    .l-banner__desc-img.l-img {
        width: 450px;
        bottom: 24%;
        left: 10%;
        z-index: 2;
    }

    .l-topic-item {
        padding: 15px;
    }

    .l-topic-content {
        font-size: 12px;
    }

    .l-concept-desc {
        margin-top: 0;
    }

    .l-concept__content h2 {
        margin-bottom: -30px;
    }

    .l-concept__title img {
        width: 600px;
    }

    .l-offcanvas-menu-wrap {
        padding-top: 100px;
        padding-left: 60px;
    }

    .l-main-menu ul>li {
        margin-bottom: 30px;
    }
    .l-main-menu ul li a {
        font-size: 28px;
    }

    .easy-popup-content {
        padding: 50px 80px;
        border: 0;
    }

    .l-product-detail__img {
        max-width: 440px;
    }

    .l-product-detail__wrap {
        gap: 60px;
        justify-content: center;
    }

    .easy-popup-container {
        max-width: 90%;
    }

    .ep-close-button {
        top: 10%;
        right: 3%;
        width: 45px;
        height: 45px;
    }

    .l-product__title.l-img img {
        width: 80%;
    }
    
}
@media (max-width: 1440px) and (min-width: 1200px) {

    .l-banner__heading {
        height: auto;
    }

    .l-banner__desc-img.l-img {
        width: 450px;
        bottom: 24%;
        left: 10%;
        z-index: 2;
    }

    .l-topic-item {
        padding: 15px;
    }

    .l-topic-content {
        font-size: 12px;
    }

    .l-concept-desc {
        margin-top: 0;
    }

    .l-concept__content h2 {
        margin-bottom: -30px;
    }

    .l-concept__title img {
        width: 600px;
    }

    .l-offcanvas-menu-wrap {
        padding-top: 100px;
        padding-left: 60px;
    }

    .l-main-menu ul>li {
        margin-bottom: 30px;
    }
    .l-main-menu ul li a {
        font-size: 28px;
    }

    .easy-popup-content {
        padding: 50px 80px;
        border: 0;
    }

    .l-product-detail__img {
        max-width: 440px;
    }

    .l-product-detail__wrap {
        gap: 60px;
        justify-content: center;
    }

    .easy-popup-container {
        max-width: 90%;
    }

    .ep-close-button {
        top: 10%;
        right: 3%;
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 576px) {

    .pc {
        display: none !important;
    }

    .l-topic {
        padding: 92px 0 57px;
    }

    .l-header__logo {
        width: 122px;
    }

    .l-header-main {
        padding: 20px;
    }

    .l-banner {
        background: url('./assets/images/bannermb.png') no-repeat center;
    }

    div#content {
        overflow: hidden;
    }

    .l-banner__products-item.l-img {
        width: 62%;
    }

    .ellipse-lbanner.ellipse3.l-img {
        display: none;
    }

    .ellipse-lbanner.ellipse5.l-img {
        display: none;
    }

    .ellipse-lbanner.ellipse6.l-img {
        width: 45.581px;
        height: 45.478px;
        transform: rotate(-16.818deg);
        bottom: 38%;
    }

    .ellipse-lbanner.ellipse8.l-img {
        left: 10%;
        z-index: 2;
    }

    .ellipse-lbanner.ellipse7.l-img {
        width: 113.973px;
        height: 129.925px;
        transform: rotate(-22.314deg);
        bottom: 30%;
    }

    .ellipse-lbanner.ellipse2.l-img {
        width: 72.555px;
        height: 55.889px;
        transform: rotate(-16.818deg);
        top: 7%;
    }

    .ellipse-lbanner.ellipse1.l-img {
        width: 79.622px;
        height: 79.441px;
        transform: rotate(-16.818deg);
        right: -50px;
        top: 15%;
    }

    section.l-section.top-concept.show {
        display: none;
    }

    .l-banner__heading.l-img {
        width: 130%;
    }

    .l-menu-trigger span:nth-of-type(3) {
        bottom: 4px;
        width: 18px;
    }

    .l-menu-trigger span:nth-of-type(2) {
        top: 10px;
        width: 18px;
    }

    .l-menu-trigger span {
        left: 50%;
        transform: translateX(-50%);
    }

    .l-banner-star-item3.l-img {
        width: 53px;
    }

    .l-banner__products {
        width: 100%;
        top: 43%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flower-bn.pc {
        display: none;
    }

    .l-banner-star-item2.l-img {
        width: 38px;
        top: 15%;
        left: 11%;
        z-index: 0;
    }

    .l-banner-star-item4.l-img {
        width: 31px;
        z-index: -1;
        top: 11%;
    }

    .l-banner__butterfly.l-img {
        width: 67px;
        height: 55px;
        top: 40%;
        left: 9%;
    }

    .l-banner__butterfly2.l-img {
        width: 54px;
        height: 44px;
        bottom: 53%;
        right: 14%;
    }

    .l-banner-star-item1.l-img {
        width: 33px;
        top: 56%;
        z-index: 0;
        left: 12%;
    }


    a.banner_btn.l-img {
        width: 140px;
        left: 47%;
        bottom: 26%;
    }

    .l-move-desc img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .l-concept__butterfly.l-img {
        width: 56px;
        height: 46px;
        top: 12%;
        left: 72%;
    }

    .l-concept__butterfly1.l-img {
        width: 48px;
        height: 36px;
        bottom: 22%;
        top: unset;
        left: 40%;
    }

    .icon-star-movie {
        top: 57%;
    }

    .l-move-desc {
        position: absolute;
        bottom: 4%;
        right: 5%;
        width: 70%;
    }

    .movie-img {
        flex: 0 0 49%;
        max-width: 49%;
    }

    .movie-content-right {
        display: flex;
        flex-direction: row-reverse;
        gap: 10px;
        padding-left: 5px;
    }

    .l-move-title img {
        width: 100%;
    }

    .l-move-title {
        left: -5%;
    }

    .copyright {
        bottom: 20px;
        line-height: 1;
        width: 100%;
        font-size: 8px;
    }

    .l-footer-wrap {
        flex-direction: column;
    }

    .l-banner__desc-img.l-img {
        width: 100%;
        height: auto;
        bottom: 10%;
        left: 0%;
        transform: translateX(-50%) rotate(10deg);
    }

    .l-menu-trigger span:nth-of-type(1) {
        width: 80%;
        margin: auto;
        top: 4px;
    }

    button.l-menu-trigger {
        width: 33px;
        height: 33px;
    }

    .l-concept__content h2 {
        margin-bottom: 0;
        font-size: 20px;
    }

    .l-concept__title img {
        width: 324px;
        height: auto;
    }

    nav.l-offcanvas-menu {
        right: -100%;
    }

    .l-banner__products {
        width: 100%;
    }

    .flower-item2.l-img {
        width: 61%;
    }

    a.banner_btn.l-img {
        width: 140px;
    }

    body.menu-open .l-offcanvas-menu {
        transform: translateZ(0);
        right: 0;
    }

    .l-concept-desc {
        font-size: 13px;
                white-space: nowrap;
    }

    .l-topic-container {
        margin: 0 35px;
    }

    .l-concept__content {
        top: 10%;
    }

    .l-banner-star {}

    .l-topic-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .l-topic .l-topic-item:nth-child(even) {
        transform: unset;
    }

    .l-topic-item {
        padding: 15px;
    }

    .l-topic-date {
        font-size: 10px;
        padding: 1px 8px;
    }

    .l-topic-content {
        font-size: 12px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        line-height: 21px;
    }

    .l-topic-item.text-center {
        font-size: 13px;
        height: 240px;
    }

    .l-topic__title.l-img {
        top: 7%;
        width: 203px;
        height: auto;
    }

    .topic-content {
        top: 18%;
    }

    .l-topic-btn.list {
        margin-top: 20px;
    }

    .l-topic-btn.list a {
        font-size: 20px;
    }

    .l-product__title {
        display: none;
    }

    .l-prod_star2.l-img {
        width: 42px;
        height: 42px;
        left: 48%;
    }

    .l-prod_star1.l-img {
        width: 29px;
        height: 29px;
        top: 25%;
        right: 7%;
    }

    .l-prod_star5.l-img {
        width: 30px;
        bottom: 15%;
        right: 37%;
    }

    .l-prod_star6.l-img {
        width: 39px;
        top: 33%;
        right: 20%;
    }

    .l-prod_star4.l-img {
        width: 41px;
        height: 41px;
        bottom: 28%;
        left: 11%;
    }

    .l-prod_star3.l-img {
        width: 46px;
        height: 46px;
        top: 26%;
        left: 10%;
    }

    .l-product__title.mb {
        display: block;
    }

    .l-product__item-list img {
        width: 68px;
        height: 68px;
        object-fit: cover;
    }

    .l-prod-desc {
        display: none;
    }

    .l-prod-desc img {
        width: 100%;
        height: auto;
        margin: auto;
        object-fit: cover;
    }

    .l-product__title.mb.l-img img {
        width: auto;
    }

    .l-product__title.mb {
        display: block;
        left: 50%;
        transform: translateX(-50%);
    }

    .l-product__title p {
        color: #383838;
        text-align: center;
        font-family: "Songti SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 49px;
    }

    .l-product__item-list {
        top: 29%;
    }


    .l-topic-btn a {
        font-size: 12px;
    }

    .l-product__item1.l-img:hover,
    .l-product__item1.l-img {
        position: absolute;
        left: 1px;
        top: 35%;
        z-index: 2;
        width: 63%;
    }

    .l-product__item2.l-img:hover,
    .l-product__item2.l-img {
        position: absolute;
        left: 20.5%;
        top: 36%;
        z-index: 9;
        width: 36%;
    }

    .l-product__item3.l-img:hover,
    .l-product__item3.l-img {
        position: absolute;
        top: 30.5%;
        left: 32%;
        z-index: 10;
        width: 60%;
    }

    .l-product__item4.l-img:hover,
    .l-product__item4.l-img {
        position: absolute;
        top: 31%;
        left: 47%;
        z-index: 2;
        width: auto;
    }

    .easy-popup-inner .swiper-slide {
        height: auto;
        border-radius: 10px;
        overflow: hidden;
    }

    .img-popup {
        height: auto;
    }

    .l-product-detail__wrap {
        flex-direction: column;
        gap: 20px;
    }

    .icon-popup {
        position: absolute;
        bottom: 30%;
        z-index: 2;
        left: -15%;
        width: 60%;
    }

    .icon-popup img {
        width: 90%;
    }

    .icon-popup.mb {
        right: -17%;
        left: unset !important;
        top: 23%;
    }

    .l-product-detail__content-title {
        font-size: 22px;
        line-height: 29px;
        text-transform: unset;
    }

    .l-product-detail__content-btn:nth-child(1) a {
        width: auto;
    }

    .swiper-pagination-bullet {
        width: 12px;
    }

    .swiper-pagination {
        gap: 5px;
    }



    .price {
        margin-bottom: 10px;
        font-size: 25px;
    }

    .popup-4 .icon-popup img {
        width: 70%;
    }

    .popup-4 .icon-popup.mb {
        right: -22%;
        left: unset !important;
        top: 26%;
    }


    .l-product-detail__content-desc {
        font-size: 14px;
    }

    .btn-group {
        gap: 11px;
    }

    .l-product-detail__content-btn a {
        padding: 10px;
        font-size: 16px !important;
    }

    /* 購入ボタンのデザイン（SP） - Figma仕様 */
    .l-product-detail__content-btn a.purchase-btn {
        border-radius: 7px;
        background: linear-gradient(180deg, #FFF 0%, #E5E5E5 67.29%);
        box-shadow: 0 0 14px 0 rgba(161, 161, 161, 0.70);
        color: #5A6570 !important;
        font-family: "Noto Sans JP" !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 600 !important;
        letter-spacing: 0.96px !important;
        text-align: center;
    }

    button.ep-close-button.ep-trigger-enabled svg {
        width: 16px;
    }

    .ep-close-button {
        top: 6%;
        right: 2%;
        width: 33px;
        height: 33px;
    }

    .flower-item.l-img {
        width: 80%;
    }

    .flower-item3.l-img {
        width: 74%;
    }

    .l-movie {
        padding: 150px 18px 100px;
    }

    .l-movie-content {
        flex-direction: column;
        gap: 10px
    }

    .movie-content-left {
        width: 100%;
        height: 100%;
    }

    .movie-img img {
        width: 100%;
        height: 100%;
    }

    .movie-swiper.swiper {
        width: 100% !important;
        height: 100% !important;
    }

    section#buy {
        padding: 80px 56px 100px;
    }

    img.l-buy-icon-img {
        width: 20px !important;
    }

    .butterfly-buy1.l-img {
        width: 36px;
        top: 79%;
        left: 50%;
    }

    .butterfly-buy2.l-img {
        display: none;
    }

    .butterfly-buy3.l-img {
        width: 36px;
        top: 6%;
        right: 24%;
    }

    .l-buy-content-title {
        gap: 5px;
    }

    .l-buy-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        position: relative;
        z-index: 1;
        margin-top: 50px;
    }

    .l-buy-content-item {
        width: 100%;
        padding: 0;
        font-size: 22px;
        height: 48px;
        margin: 0;
    }

    .person-buy {
        bottom: unset;
        top: 18%;
    }

    .l-buy-content-title img {
        width: 170px;
        height: auto;
    }

    .person-buy img {
        width: 360px;
    }

    .l-buy .flower-item.l-img {
        bottom: 22%;
        width: 50%;
    }

    .l-buy .flower-item3.l-img {
        width: 50%;
        bottom: 22%;
    }

    body.menu-open .l-menu-trigger span:nth-of-type(1) {
        transform: translateY(6px) rotate(-45deg);
        width: 18px;
        background-color: #fff;
        left: 0px;
    }

    body.menu-open .l-menu-trigger span:nth-of-type(3) {
        transform: translateY(-7px) rotate(45deg);
        width: 18px;
        background-color: #fff;
        left: 4px;
    }

    .l-offcanvas-menu-wrap {
        padding: 50px 66px 0;
    }

    body.menu-open .l-offcanvas-menu {
        transform: translateZ(0);
        right: 0;
        z-index: 999;
        width: 100%;
        background: #3b6075;
        border-radius: unset;
    }

    .icon-menu {
        width: 90%;
        margin: auto;
        bottom: 80px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

    }

    .icon-menu img {
        width: 100%;

    }

    .shop-menu-item a {
        font-size: 18px !important;
    }

    .l-info-menu {
        font-size: 11px;
        bottom: 30px;
    }

    .l-main-menu ul li a {
        font-size: 24px;
    }

    .l-main-menu ul>li {
        margin-bottom: 30px;
    }

    button.l-menu-trigger {
        width: 33px;
        height: 33px;
        z-index: 999999;
    }

    .easy-popup-content {
        padding: 50px 40px;
    }

    .easy-popup-inner .swiper-slide img {
        width: 100%;
        object-fit: cover;
        display: block;
    }

    .new-popup {
        width: 40%;
        top: 3%;
    }

    .new-popup img {
        width: 100%;
        height: auto;
    }

    .star-popup2,
    .star-popup1 {
        display: none;
    }

    .desc-popup {
        display: none;
    }

    .content-detail_prod {
        height: 176px;
        break-after: right;
        overflow-y: auto;
    }

    .icon-star-movie img {
        width: 40px;
    }


    footer.l-footer {
        padding: 45px 0;
    }

    .container-ft {
        padding: 0;
    }

    .l-footer__policy a {
        font-size: 11px;
    }

    .l-footer__policy.mb {
        text-align: center;
        margin-top: 35px;
    }

    .l-footer {
        padding: 30px 0;
    }

    section#buy {
        padding: 80px 56px 350px;
    }
}

/*đây là code copy của meme*/

.img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal,
.modal--5 .modal__btn3D {
    display: none
}

.modal__btn3DArrow,
.mv__bgPh {
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px
}

.modal__btnTxt,
.modal__copyTxt,
.roll__txt,
.shop__itemTxt {
    white-space: nowrap
}

.shop__btns,
.shop__list,
.topics__list {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple
}

.f-fig {
    font-family: Figtree, sans-serif
}

.concept {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 330lvh;
    overflow: clip;
}

.concept__cont {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100lvh;
    padding-bottom: clamp(25px, 25vh, 200px);
    background-image: url("./assets/images/TOP-CONCEPT.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.concept__cont:before,
.concept__contCover {
    top: 0;
    height: 100%;
    position: absolute;
    left: 0;
    width: 100%
}

.concept__cont:before {
    content: '';
    z-index: 1;
      background-color: #fff;
    opacity: .7;
    -webkit-transition: opacity .8s;
    -moz-transition: opacity .8s;
    -o-transition: opacity .8s;
    -ms-transition: opacity .8s;
    transition: opacity .8s;
    pointer-events: none !important
}

.modal__btn3DInner:before,
.modal__btnInner:before {
    z-index: -1;
    background-color: #000;
    border-radius: 50px
}

.concept__cont.bg-fade:before {
    opacity: 0
}

.concept__cont.is-show .concept__ttl {
    -webkit-animation: 2s forwards bomb_concept;
    -moz-animation: 2s forwards bomb_concept;
    -o-animation: 2s forwards bomb_concept;
    -ms-animation: bomb_concept 2000ms ease forwards;
    animation: 2s forwards bomb_concept
}

@-moz-keyframes bomb_concept {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -o-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes bomb_concept {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -o-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes bomb_concept {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -o-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bomb_concept {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -o-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.concept__cont.is-show .concept__contCover,
.concept__cont.is-show .concept__inner {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.concept__contCover {
    background-color: rgba(0, 0, 0, .35);
    opacity: 0;
    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
    transition: opacity .6s
}

.concept__inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0) scale(1);
    -moz-transform: translate3d(0, -50%, 0) scale(1);
    -o-transform: translate3d(0, -50%, 0) scale(1);
    -ms-transform: translate3d(0, -50%, 0) scale(1);
    transform: translate3d(0, -50%, 0) scale(1);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    opacity: 0;
    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
    transition: opacity .6s
}

.concept__ttl {
    width: clamp(41.5px, 41.5vh, 332px);
    margin: clamp(-300px, -37.5vh, -37.5px) auto 0;
    padding: clamp(12.5px, 12.5vh, 100px) 0 0
}

.concept__lead {
    margin: clamp(2.5px, 2.5vh, 20px) 0 clamp(3.75px, 3.75vh, 30px);
    font-size: clamp(2.5px, 2.5vh, 20px);
    line-height: 2;
    letter-spacing: .08em;
    text-align: center;
    font-weight: 600;
    color: #fff
}

.concept__logo {
    width: clamp(26px, 26vh, 208px);
    margin: 0 auto
}

.concept__btn {
    position: relative;
    z-index: 1;
    margin: clamp(5.625px, 5.625vh, 45px) auto 0
}

.concept__btn .moreBtn {
    width: clamp(39.75px, 39.75vh, 318px);
    aspect-ratio: 5.678571428571429
}

.concept__btn .moreBtn__txt {
    top: 48%;
    font-weight: 500;
    font-size: clamp(2.75px, 2.75vh, 22px);
    letter-spacing: .17em
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 99;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s
}

.modal__content,
.modal__overlay {
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute
}

.modal--5 .modal__openner3D {
    pointer-events: none;
    display: block
}

.modal.is-open,
.modalConcept.is-open {
    display: block;
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.modal.is-overflow .modal__content {
    width: 100vw
}

.modal.is-overflow .modal__flex {
    width: 100vw;
    padding: 2.734375vw 0
}

.modal.is-overflow .modal__btn3D {
    bottom: 2.734375vw;
    right: 2.734375vw;
    width: 6.328125vw
}

.modal.is-overflow .modal__txtBox {
    width: 50vw
}

.modal.is-overflow .modal__name-en {
    margin: 6.484375vw 0 0;
    font-size: 3.125vw
}

.modal.is-overflow .modal__name-jp {
    margin: .390625vw 0 0;
    font-size: 2.1875vw
}

.modal.is-overflow .modal__note {
    margin: .78125vw 0 0;
    font-size: 2.1875vw
}

.modal.is-overflow .modal__copy {
    height: 12.5vw;
    font-size: 3.125vw
}

.modal.is-overflow .modal__copy--5 {
    font-size: 2.5vw
}

.modal.is-overflow .modal__copyTxt sup {
    font-size: 1.40625vw;
    padding-left: .390625vw
}

.modal.is-overflow .modal__copyTxt span {
    top: .390625vw;
    right: -.78125vw;
    font-size: 1.015625vw
}

.modal.is-overflow .modal__copyTxt span sup {
    font-size: 1.171875vw;
    padding-right: .390625vw
}

.modal.is-overflow .modal__list {
    width: 39.296875vw;
    font-size: 1.875vw
}

.modal.is-overflow .modal__listItem {
    padding: 0 0 0 2.34375vw;
    margin: .78125vw 0 0 -.78125vw
}

.modal.is-overflow .modal__listItem:before {
    top: .15625vw;
    width: 1.640625vw;
    height: 1.640625vw
}

.modal.is-overflow .modal__btns {
    margin: 7.8125vw auto 0;
    width: 32.890625vw
}

.modal.is-overflow .modal__btn {
    width: 15.625vw
}

.modal.is-overflow .modal__btnInner:before {
    top: .390625vw;
    left: .390625vw;
    right: -.625vw;
    bottom: -.625vw
}

.modal.is-overflow .modal__btnTxt {
    font-size: 2.5vw
}

.modal.is-overflow .modal__kira {
    width: 6.09375vw
}

.modal.is-overflow .modal__kira--1 {
    left: 3.515625vw
}

.modal.is-overflow .modal__kira--2 {
    right: 3.515625vw
}

.modal.is-overflow .modal__ph {
    width: 42.96875vw
}

.modal.is-overflow .modal__phImg {
    width: 22.5vw
}

.modal__overlay {
    top: 0;
    background: rgba(0, 0, 0, .8)
}

.modal__content {
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0) scale(.9);
    -moz-transform: translate3d(0, -50%, 0) scale(.9);
    -o-transform: translate3d(0, -50%, 0) scale(.9);
    -ms-transform: translate3d(0, -50%, 0) scale(.9);
    transform: translate3d(0, -50%, 0) scale(.9);
    overflow-y: scroll;
    background: -webkit-linear-gradient(90deg, #00fab2 0, #00eba5 6.31%, #00da97 16.56%, #00cf8d 29.33%, #00c888 47.25%, #00c686 96.98%);
    background: -moz-linear-gradient(90deg, #00fab2 0, #00eba5 6.31%, #00da97 16.56%, #00cf8d 29.33%, #00c888 47.25%, #00c686 96.98%);
    background: -o-linear-gradient(90deg, #00fab2 0, #00eba5 6.31%, #00da97 16.56%, #00cf8d 29.33%, #00c888 47.25%, #00c686 96.98%);
    background: -ms-linear-gradient(90deg, #00fab2 0, #00eba5 6.31%, #00da97 16.56%, #00cf8d 29.33%, #00c888 47.25%, #00c686 96.98%);
    background: linear-gradient(0deg, #00fab2 0, #00eba5 6.31%, #00da97 16.56%, #00cf8d 29.33%, #00c888 47.25%, #00c686 96.98%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s
}

.modal__btn3DInner,
.modal__close {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .3s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .3s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .3s cubic-bezier(.19, 1, .22, 1);
    z-index: 1
}

.modal.is-open .modal__content {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, -50%, 0) scale(1);
    -moz-transform: translate3d(0, -50%, 0) scale(1);
    -o-transform: translate3d(0, -50%, 0) scale(1);
    -ms-transform: translate3d(0, -50%, 0) scale(1);
    transform: translate3d(0, -50%, 0) scale(1)
}

.modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 60px;
    height: 60px;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal__close-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.modal__flex {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: clamp(160px, 160vh, 1280px);
    padding: clamp(4.375px, 4.375vh, 35px) 0;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.modal__phBox {
    position: relative;
    width: 50%;
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.modal__kira {
    position: absolute;
    top: 0;
    width: clamp(9.75px, 9.75vh, 78px)
}

.modal__kira--1 {
    left: clamp(5.625px, 5.625vh, 45px)
}

.modal__kira--2 {
    right: clamp(5.625px, 5.625vh, 45px)
}

.modal__ph {
    position: relative;
    width: clamp(68.75px, 68.75vh, 550px);
    aspect-ratio: .7638888888888888;
    margin: 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-radius: 500px 500px 50px 50px;
    background: var(--gradation-color)
}

.modal__phImg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: clamp(36px, 36vh, 288px);
    aspect-ratio: .5210589651022864
}

.modal__btn3D {
    position: absolute;
    bottom: clamp(4.375px, 4.375vh, 35px);
    right: clamp(4.375px, 4.375vh, 35px);
    width: clamp(10.125px, 10.125vh, 81px);
    aspect-ratio: 1
}

.modal__btn3DA,
.modal__btn3DInner,
.modal__btn3DPh {
    width: 100%;
    height: 100%
}

.modal__btn3DInner {
    position: relative;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal__btn3DInner:before,
.modal__btnInner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .3s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .3s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal__btn3DInner:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: -3px;
    bottom: -3px;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal__btn3DA {
    position: relative;
    z-index: 1;
    display: inline-block
}

.modal3d__loading,
.modal__btns {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox
}

.modal__btn3DArrow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(0);
    -moz-transform: rotateX(60deg) rotateY(0) rotateZ(0);
    -o-transform: rotateX(60deg) rotateY(0) rotateZ(0);
    -ms-transform: rotateX(60deg) rotateY(0) rotateZ(0);
    transform: rotateX(60deg) rotateY(0) rotateZ(0);
    -webkit-animation: 2s linear infinite btn3dline;
    -moz-animation: 2s linear infinite btn3dline;
    -o-animation: 2s linear infinite btn3dline;
    -ms-animation: btn3dline 2s linear infinite;
    animation: 2s linear infinite btn3dline
}

@-moz-keyframes btn3dline {
    from {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        transform: rotateX(60deg) rotateY(0) rotateZ(0)
    }

    to {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        transform: rotateX(60deg) rotateY(0) rotateZ(360deg)
    }
}

@-webkit-keyframes btn3dline {
    from {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        transform: rotateX(60deg) rotateY(0) rotateZ(0)
    }

    to {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        transform: rotateX(60deg) rotateY(0) rotateZ(360deg)
    }
}

@-o-keyframes btn3dline {
    from {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        transform: rotateX(60deg) rotateY(0) rotateZ(0)
    }

    to {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        transform: rotateX(60deg) rotateY(0) rotateZ(360deg)
    }
}

@keyframes btn3dline {
    from {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(0);
        transform: rotateX(60deg) rotateY(0) rotateZ(0)
    }

    to {
        -webkit-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -moz-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -o-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        -ms-transform: rotateX(60deg) rotateY(0) rotateZ(360deg);
        transform: rotateX(60deg) rotateY(0) rotateZ(360deg)
    }
}

.modal__txtBox {
    position: relative;
    width: clamp(80px, 80vh, 640px);
    margin: 0 auto;
    height: 100%;
    text-align: center
}

.modal__name-en {
    margin: clamp(10.375px, 10.375vh, 83px) 0 0;
    font-size: clamp(5px, 5vh, 40px);
    line-height: 1.175;
    font-weight: 800;
    letter-spacing: .05em
}

.modal__name-jp,
.modal__note {
    font-size: clamp(3.5px, 3.5vh, 28px);
    line-height: 1.464285714285714;
    font-weight: 400;
    letter-spacing: .09em
}

.modal__name-jp {
    margin: clamp(.625px, .625vh, 5px) 0 0
}

.modal__note {
    margin: clamp(1.25px, 1.25vh, 10px) 0 0
}

.modal__copy {
    position: relative;
    height: clamp(20px, 20vh, 160px);
    font-size: clamp(5px, 5vh, 40px);
    line-height: 1.275;
    font-weight: 600;
    letter-spacing: .06em
}

.modal__btnTxt,
.modal__list {
    font-weight: 400;
    letter-spacing: .09em
}

.modal__copy--5 {
    font-size: clamp(4px, 4vh, 32px)
}

.modal__copyTxt {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.modal__copyTxt sup {
    line-height: 2.5;
    font-size: clamp(2.25px, 2.25vh, 18px);
    padding-left: clamp(.625px, .625vh, 5px)
}

.modal__copyTxt span {
    position: absolute;
    top: clamp(.625px, .625vh, 5px);
    right: clamp(1.25px, 1.25vh, 10px);
    font-size: clamp(1.625px, 1.625vh, 13px);
    line-height: 1;
    letter-spacing: -.03em;
    text-align: left;
    white-space: nowrap;
    font-weight: 400
}

.modal__copyTxt span sup {
    line-height: 1.3;
    font-size: clamp(1.875px, 1.875vh, 15px);
    padding-right: clamp(.25px, .25vh, 2px)
}

.modal__list {
    width: clamp(62.875px, 62.875vh, 503px);
    margin: 0 auto;
    font-size: clamp(3px, 3vh, 24px);
    line-height: 1.458333333333333;
    text-align: left
}

.modal__listItem {
    position: relative;
    padding: 0 0 0 clamp(3.75px, 3.75vh, 30px);
    margin: clamp(1.25px, 1.25vh, 10px) 0 0;
    margin-left: clamp(-10px, -1.25vh, -1.25px)
}

.modal__listItem:before {
    content: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjEuNTMgMjEuNTMiPjxnIGlkPSJjIj48cGF0aCBkPSJNMTMuNTQsNy45OGMtMS4yNi0xLjI2LTIuNTItNi44NS0yLjU0LTYuOTFsLS4yNC0xLjA3LS4yNCwxLjA3Yy0uMDEuMDYtMS4yOCw1LjY1LTIuNTQsNi45MS0xLjI2LDEuMjYtNi44NiwyLjUyLTYuOTEsMi41NGwtMS4wNy4yNCwxLjA3LjI0Yy4wNi4wMSw1LjY1LDEuMjgsNi45MSwyLjU0LDEuMjYsMS4yNiwyLjUyLDYuODYsMi41NCw2LjkxbC4yNCwxLjA3LjI0LTEuMDdjLjAxLS4wNiwxLjI4LTUuNjUsMi41NC02LjkxLDEuMjYtMS4yNiw2Ljg2LTIuNTIsNi45MS0yLjU0bDEuMDctLjI0LTEuMDctLjI0Yy0uMDYtLjAxLTUuNjUtMS4yOC02LjkxLTIuNTRaIi8+PC9nPjwvc3ZnPg==");
    position: absolute;
    top: clamp(.25px, .25vh, 2px);
    left: 0;
    width: clamp(2.625px, 2.625vh, 21px);
    height: clamp(2.625px, 2.625vh, 21px);
    background-size: contain
}

.modal__btns {
    margin: clamp(12.5px, 12.5vh, 100px) auto 0;
    width: clamp(52.625px, 52.625vh, 421px);
    display: box;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.modal__btns--noBtn {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.modal__btn {
    width: clamp(25px, 25vh, 200px);
    aspect-ratio: 2.777777777777778;
    cursor: pointer
}

.modal__btnA,
.modal__btnInner {
    position: relative;
    width: 100%;
    height: 100%
}

.modal__btnInner {
    z-index: 1;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal__btnInner:before {
    content: '';
    position: absolute;
    top: clamp(.625px, .625vh, 5px);
    left: clamp(.625px, .625vh, 5px);
    right: clamp(-8px, -1vh, -1px);
    bottom: clamp(-8px, -1vh, -1px);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .3s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .3s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal__btnA {
    display: inline-block;
    border-radius: 50px;
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    text-align: center
}

.modal__btnTxt {
    position: absolute;
    top: 47%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    font-size: clamp(4px, 4vh, 32px);
    line-height: 1;
    text-align: left
}

.modal3d,
.modal3d__overlay {
    top: 0;
    width: 100%;
    height: 100%;
    left: 0
}

.modal3d {
    position: fixed;
    z-index: 9999;
    display: none;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s;
    pointer-events: none
}

.modal3d.is-active {
    display: block;
    opacity: 1;
    -ms-filter: none;
    filter: none;
    pointer-events: auto
}

.modal3d__overlay {
    position: absolute;
    background: -webkit-linear-gradient(90deg, #fdc5f4 9.36%, #f9aaea 34.82%, #f695e2 60.52%, #f58edf 77.64%);
    background: -moz-linear-gradient(90deg, #fdc5f4 9.36%, #f9aaea 34.82%, #f695e2 60.52%, #f58edf 77.64%);
    background: -o-linear-gradient(90deg, #fdc5f4 9.36%, #f9aaea 34.82%, #f695e2 60.52%, #f58edf 77.64%);
    background: -ms-linear-gradient(90deg, #fdc5f4 9.36%, #f9aaea 34.82%, #f695e2 60.52%, #f58edf 77.64%);
    background: linear-gradient(0deg, #fdc5f4 9.36%, #f9aaea 34.82%, #f695e2 60.52%, #f58edf 77.64%);
    opacity: .88
}

.modal3d__close {
    position: absolute;
    top: clamp(2.5px, 2.5vh, 20px);
    right: clamp(2.5px, 2.5vh, 20px);
    z-index: 10000;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    width: clamp(7.5px, 7.5vh, 60px);
    height: clamp(7.5px, 7.5vh, 60px);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .3s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .3s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modal3d__close-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.modal3d__content {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto
}

.modal3d__viewerPh img,
.mv {
    pointer-events: none
}

.modal3d__viewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.modal3d__viewerPhs {
    -webkit-transition: opacity .3s .5s;
    -moz-transition: opacity .3s .5s;
    -o-transition: opacity .3s .5s;
    -ms-transition: opacity .3s .5s;
    transition: opacity .3s .5s
}

.modal3d__viewerPhs.is-loading {
    display: block !important;
    opacity: 0
}

.modal3d__viewerPhs.is-loading .modal3d__viewerPh {
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    -webkit-transform: translate3d(0, 0, 0) rotateX(180deg) !important;
    -moz-transform: translate3d(0, 0, 0) rotateX(180deg) !important;
    -o-transform: translate3d(0, 0, 0) rotateX(180deg) !important;
    -ms-transform: translate3d(0, 0, 0) rotateX(180deg) !important;
    transform: translate3d(0, 0, 0) rotateX(180deg) !important
}

.modal3d__viewerPhs--1 .modal3d__viewerPh,
.modal3d__viewerPhs--2 .modal3d__viewerPh {
    left: 45%
}

.modal3d__viewerPhs--3 .modal3d__viewerPh {
    width: clamp(43.75px, 43.75vh, 350px);
    height: clamp(77.5px, 77.5vh, 620px)
}

.modal3d__viewerPh {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(56.25px, 56.25vh, 450px);
    height: clamp(100px, 100vh, 800px);
    user-drag: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden
}

.mv__bgPh,
.product__cardFront {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden
}

.modal3d__viewerPh.is-show {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    z-index: 1
}

.modal3d__loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s
}

.modal3d__fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 1001;
    background: rgba(255, 255, 255, .9)
}

.modal3d__fallback-content {
    text-align: center;
    padding: clamp(2.5px, 2.5vh, 20px);
    max-width: 80%
}

.modal3d__fallback-content p {
    margin-bottom: clamp(1.875px, 1.875vh, 15px);
    color: #333;
    font-size: clamp(2px, 2vh, 16px);
    line-height: 1.5
}

.modal3d__fallback-content p:first-child {
    font-weight: 700;
    color: #e91e63
}

.modal3d__fallback-content img {
    border-radius: clamp(1.25px, 1.25vh, 10px);
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1)
}

.modal3d__loadingItem {
    width: 50px;
    height: 50px;
    margin: 0 10px;
    opacity: 0;
    -webkit-transform: scale(.5) translate3d(0, 0, 0);
    -moz-transform: scale(.5) translate3d(0, 0, 0);
    -o-transform: scale(.5) translate3d(0, 0, 0);
    -ms-transform: scale(.5) translate3d(0, 0, 0);
    transform: scale(.5) translate3d(0, 0, 0);
    -webkit-animation: 2s ease-in-out infinite loadingItem;
    -moz-animation: 2s ease-in-out infinite loadingItem;
    -o-animation: 2s ease-in-out infinite loadingItem;
    -ms-animation: loadingItem 2000ms infinite ease-in-out;
    animation: 2s ease-in-out infinite loadingItem
}

.modal3d__loadingItem:first-child {
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
    -ms-animation-delay: 400ms;
    animation-delay: .4s
}

.modal3d__loadingItem:nth-child(2) {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -ms-animation-delay: 500ms;
    animation-delay: .5s
}

.modal3d__loadingItem:nth-child(3) {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -o-animation-delay: .6s;
    -ms-animation-delay: 600ms;
    animation-delay: .6s
}

.modal3d__loadingItem:nth-child(4) {
    -webkit-animation-delay: .7s;
    -moz-animation-delay: .7s;
    -o-animation-delay: .7s;
    -ms-animation-delay: 700ms;
    animation-delay: .7s
}

.modal3d__loadingItem img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.product__card,
.product__cardFront {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

@-moz-keyframes loadingItem {

    0%,
    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -o-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    12% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    20% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    28%,
    80% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    90% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes loadingItem {

    0%,
    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -o-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    12% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    20% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    28%,
    80% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    90% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes loadingItem {

    0%,
    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -o-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    12% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    20% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    28%,
    80% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    90% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes loadingItem {

    0%,
    100% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -moz-transform: scale(.5);
        -o-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    12% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    20% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    28%,
    80% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    90% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.modalConcept.is-open .modalConcept__lead-text,
.mv.fade-in .mv__cloud,
.mv.fade-in .mv__rose {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.modalConcept {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 99;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s
}

.modalConcept.is-open .modalConcept__lead-text {
    -ms-filter: none;
    filter: none;
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity .8s, -webkit-transform .8s cubic-bezier(.25, .46, .45, .94);
    -moz-transition: opacity .8s, -moz-transform .8s cubic-bezier(.25, .46, .45, .94);
    -o-transition: opacity .8s, -o-transform .8s cubic-bezier(.25, .46, .45, .94);
    -ms-transition: opacity .8s, -ms-transform .8s cubic-bezier(.25, .46, .45, .94);
    transition: opacity .8s, transform .8s cubic-bezier(.25, .46, .45, .94)
}

.modalConcept.is-open .modalConcept__lead-text:first-child {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    transition-delay: 350ms
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(2) {
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(3) {
    -webkit-transition-delay: 850ms;
    -moz-transition-delay: 850ms;
    -o-transition-delay: 850ms;
    -ms-transition-delay: 850ms;
    transition-delay: 850ms
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(4) {
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -o-transition-delay: 1.1s;
    -ms-transition-delay: 1.1s;
    transition-delay: 1.1s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(5) {
    -webkit-transition-delay: 1.35s;
    -moz-transition-delay: 1.35s;
    -o-transition-delay: 1.35s;
    -ms-transition-delay: 1.35s;
    transition-delay: 1.35s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(6) {
    -webkit-transition-delay: 1.6s;
    -moz-transition-delay: 1.6s;
    -o-transition-delay: 1.6s;
    -ms-transition-delay: 1.6s;
    transition-delay: 1.6s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(7) {
    -webkit-transition-delay: 1.85s;
    -moz-transition-delay: 1.85s;
    -o-transition-delay: 1.85s;
    -ms-transition-delay: 1.85s;
    transition-delay: 1.85s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(8) {
    -webkit-transition-delay: 2.1s;
    -moz-transition-delay: 2.1s;
    -o-transition-delay: 2.1s;
    -ms-transition-delay: 2.1s;
    transition-delay: 2.1s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(9) {
    -webkit-transition-delay: 2.35s;
    -moz-transition-delay: 2.35s;
    -o-transition-delay: 2.35s;
    -ms-transition-delay: 2.35s;
    transition-delay: 2.35s
}

.modalConcept.is-open .modalConcept__lead-text:nth-child(10) {
    -webkit-transition-delay: 2.6s;
    -moz-transition-delay: 2.6s;
    -o-transition-delay: 2.6s;
    -ms-transition-delay: 2.6s;
    transition-delay: 2.6s
}

.modalConcept__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 15.06%, #f790e1 22.18%, #f785ce 28.57%, #f76ea5 43.88%, #f7608c 55.99%, #f75b83 63.32%, #fa3a6e 74.07%, #ff0c52 87.05%, #ff0f50 91.33%, #ff174b 94.14%, #ff2641 96.52%, #ff3b33 98.65%, #ff4d28 100%);
    background: -moz-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 15.06%, #f790e1 22.18%, #f785ce 28.57%, #f76ea5 43.88%, #f7608c 55.99%, #f75b83 63.32%, #fa3a6e 74.07%, #ff0c52 87.05%, #ff0f50 91.33%, #ff174b 94.14%, #ff2641 96.52%, #ff3b33 98.65%, #ff4d28 100%);
    background: -o-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 15.06%, #f790e1 22.18%, #f785ce 28.57%, #f76ea5 43.88%, #f7608c 55.99%, #f75b83 63.32%, #fa3a6e 74.07%, #ff0c52 87.05%, #ff0f50 91.33%, #ff174b 94.14%, #ff2641 96.52%, #ff3b33 98.65%, #ff4d28 100%);
    background: -ms-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 15.06%, #f790e1 22.18%, #f785ce 28.57%, #f76ea5 43.88%, #f7608c 55.99%, #f75b83 63.32%, #fa3a6e 74.07%, #ff0c52 87.05%, #ff0f50 91.33%, #ff174b 94.14%, #ff2641 96.52%, #ff3b33 98.65%, #ff4d28 100%);
    background: linear-gradient(180deg, #ffc7f6 2.54%, #f9a1e7 15.06%, #f790e1 22.18%, #f785ce 28.57%, #f76ea5 43.88%, #f7608c 55.99%, #f75b83 63.32%, #fa3a6e 74.07%, #ff0c52 87.05%, #ff0f50 91.33%, #ff174b 94.14%, #ff2641 96.52%, #ff3b33 98.65%, #ff4d28 100%)
}

.modalConcept__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll
}

.modalConcept__close {
    position: absolute;
    z-index: 1;
    top: 65px;
    right: 65px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 60px;
    height: 60px;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .3s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .3s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1)
}

.modalConcept__close-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.modalConcept__logo {
    width: 367px;
    margin: 0 auto
}

.modalConcept__box {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    -ms-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    width: 100%
}

.modalConcept__lead {
    margin-top: 40px;
    padding: 0 20px;
    font-size: 20px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: .06em;
    text-align: center;
    color: #fff;
    font-feature-settings: "none"
}

.modalConcept__lead-text {
    opacity: 0;
    -webkit-transform: translate3d(0, 3%, 0);
    -moz-transform: translate3d(0, 3%, 0);
    -o-transform: translate3d(0, 3%, 0);
    -ms-transform: translate3d(0, 3%, 0);
    transform: translate3d(0, 3%, 0)
}

.mv,
.mv__inner {
    height: 100lvh;
    overflow: clip
}

.mv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    scroll-margin-top: 1000px
}

.mv.fade-in .mv__bg {
    -webkit-transform: scale(4) translate3d(0, 0, 0);
    -moz-transform: scale(4) translate3d(0, 0, 0);
    -o-transform: scale(4) translate3d(0, 0, 0);
    -ms-transform: scale(4) translate3d(0, 0, 0);
    transform: scale(4) translate3d(0, 0, 0);
    will-change: transform;
    -webkit-transition: -webkit-transform .8s cubic-bezier(.77, 0, .175, 1);
    -moz-transition: -moz-transform .8s cubic-bezier(.77, 0, .175, 1);
    -o-transition: -o-transform .8s cubic-bezier(.77, 0, .175, 1);
    -ms-transition: -ms-transform .8s cubic-bezier(.77, 0, .175, 1);
    transition: transform .8s cubic-bezier(.77, 0, .175, 1)
}

.mv.fade-in .mv__liquid,
.mv.fade-in .mv__product {
    -webkit-animation: 2.5s .4s forwards bomb_mv;
    -moz-animation: 2.5s .4s forwards bomb_mv;
    -o-animation: 2.5s .4s forwards bomb_mv;
    -ms-animation: bomb_mv 2500ms ease forwards 400ms;
    animation: 2.5s .4s forwards bomb_mv
}

@-moz-keyframes bomb_mv {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.98);
        -moz-transform: scale(.98);
        -o-transform: scale(.98);
        -ms-transform: scale(.98);
        transform: scale(.98)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes bomb_mv {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.98);
        -moz-transform: scale(.98);
        -o-transform: scale(.98);
        -ms-transform: scale(.98);
        transform: scale(.98)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes bomb_mv {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.98);
        -moz-transform: scale(.98);
        -o-transform: scale(.98);
        -ms-transform: scale(.98);
        transform: scale(.98)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bomb_mv {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.98);
        -moz-transform: scale(.98);
        -o-transform: scale(.98);
        -ms-transform: scale(.98);
        transform: scale(.98)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.mv.fade-in .mv__bubble {
    -webkit-animation: 2.5s .8s forwards bomb_mv;
    -moz-animation: 2.5s .8s forwards bomb_mv;
    -o-animation: 2.5s .8s forwards bomb_mv;
    -ms-animation: bomb_mv 2500ms ease forwards 800ms;
    animation: 2.5s .8s forwards bomb_mv
}

.mv.fade-in .mv__bubble--5 {
    -webkit-animation: 2.5s 1s forwards bomb_mv;
    -moz-animation: 2.5s 1s forwards bomb_mv;
    -o-animation: 2.5s 1s forwards bomb_mv;
    -ms-animation: bomb_mv 2500ms ease forwards 1000ms;
    animation: 2.5s 1s forwards bomb_mv
}

.mv.fade-in .mv__hearts {
    -webkit-animation: 2.5s 1s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow;
    -moz-animation: 2.5s 1s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow;
    -o-animation: 2.5s 1s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow;
    -ms-animation: bomb_mv 2500ms ease forwards 1000ms, bubble_slow 2900ms infinite cubic-bezier(.455, .03, .515, .955) 3000ms;
    animation: 2.5s 1s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow
}

.mv.fade-in .mv__heartPh {
    -webkit-animation: 2.8s 3s infinite boyon;
    -moz-animation: 2.8s 3s infinite boyon;
    -o-animation: 2.8s 3s infinite boyon;
    -ms-animation: boyon 2800ms ease infinite 3000ms;
    animation: 2.8s 3s infinite boyon
}

.mv.fade-in .mv__stars {
    -webkit-animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow2;
    -moz-animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow2;
    -o-animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow2;
    -ms-animation: bomb_mv 2500ms ease forwards 800ms, bubble_slow2 2900ms infinite cubic-bezier(.455, .03, .515, .955) 3000ms;
    animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow2
}

.mv.fade-in .mv__stars--2 {
    -webkit-animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow_reverse;
    -moz-animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow_reverse;
    -o-animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow_reverse;
    -ms-animation: bomb_mv 2500ms ease forwards 800ms, bubble_slow_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) 3000ms;
    animation: 2.5s .8s forwards bomb_mv, 2.9s cubic-bezier(.455, .03, .515, .955) 3s infinite bubble_slow_reverse
}

.mv.fade-in .mv__cloud,
.mv.fade-in .mv__rose {
    -ms-filter: none;
    filter: none;
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(.165, .84, .44, 1), opacity .8s;
    -moz-transition: -moz-transform 1.3s cubic-bezier(.165, .84, .44, 1), opacity .8s;
    -o-transition: -o-transform 1.3s cubic-bezier(.165, .84, .44, 1), opacity .8s;
    -ms-transition: -ms-transform 1.3s cubic-bezier(.165, .84, .44, 1), opacity .8s;
    transition: transform 1.3s cubic-bezier(.165, .84, .44, 1), opacity .8s
}

.mv__bg,
.mv__inner {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    top: 0;
    left: 0;
    width: 100%
}

.mv.fade-in .mv__roseInner {
    width: 100%;
    height: 100%;
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1.5s infinite mv_fuwa;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1.5s infinite mv_fuwa;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1.5s infinite mv_fuwa;
    -ms-animation: mv_fuwa 2900ms infinite cubic-bezier(.455, .03, .515, .955) 1500ms;
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1.5s infinite mv_fuwa
}

.mv__inner {
    position: sticky;
    z-index: 10;
    transform: translate3d(0, 0, 0)
}

.mv__bg,
.mv__bgPh,
.mv__heart,
.mv__hearts,
.mv__liquid,
.mv__liquidPh--2,
.mv__logo,
.mv__products,
.mv__star,
.shop__star {
    position: absolute
}

.mv__inner.is-hide,
.op.fade-out {
    opacity: 0
}

.mv__inner.is-hide .mv__bg {
    -webkit-transform: scale(4) !important;
    -moz-transform: scale(4) !important;
    -o-transform: scale(4) !important;
    -ms-transform: scale(4) !important;
    transform: scale(4) !important
}

.mv__bg {
    z-index: -1;
    height: 100%;
    overflow: hidden;
    transform: translate3d(0, 0, 0)
}

.mv__bgPh {
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/top/top_mask.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform, background-image;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    image-rendering: auto
}

.mv__logo {
    top: 41px;
    left: 33px;
    width: 111px
}

.mv__logoA {
    display: inline-block;
    pointer-events: auto;
    width: 100%;
    height: 100%
}

.shop__btns,
.shop__cont {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox
}

.op,
.product__canvasKira,
.product__cards,
.roll,
.special__movieInner {
    pointer-events: none
}

.mv__products {
    z-index: 10;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    aspect-ratio: .9339080459770115
}

.mv__products img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mv__product {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0) scale(0);
    -moz-transform: translate3d(0, 30%, 0) scale(0);
    -o-transform: translate3d(0, 30%, 0) scale(0);
    -ms-transform: translate3d(0, 30%, 0) scale(0);
    transform: translate3d(0, 30%, 0) scale(0);
    will-change: transform
}

.mv__productPh {
    -webkit-animation: 3.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa;
    -moz-animation: 3.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa;
    -o-animation: 3.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa;
    -ms-animation: mv_fuwa 3900ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 3.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa
}

@-moz-keyframes mv_fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 3%, 0);
        -moz-transform: translate3d(0, 3%, 0);
        -o-transform: translate3d(0, 3%, 0);
        -ms-transform: translate3d(0, 3%, 0);
        transform: translate3d(0, 3%, 0)
    }
}

@-webkit-keyframes mv_fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 3%, 0);
        -moz-transform: translate3d(0, 3%, 0);
        -o-transform: translate3d(0, 3%, 0);
        -ms-transform: translate3d(0, 3%, 0);
        transform: translate3d(0, 3%, 0)
    }
}

@-o-keyframes mv_fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 3%, 0);
        -moz-transform: translate3d(0, 3%, 0);
        -o-transform: translate3d(0, 3%, 0);
        -ms-transform: translate3d(0, 3%, 0);
        transform: translate3d(0, 3%, 0)
    }
}

@keyframes mv_fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 3%, 0);
        -moz-transform: translate3d(0, 3%, 0);
        -o-transform: translate3d(0, 3%, 0);
        -ms-transform: translate3d(0, 3%, 0);
        transform: translate3d(0, 3%, 0)
    }
}

.mv__liquid {
    top: 290px;
    left: -100px;
    width: 965px;
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0) scale(0);
    -moz-transform: translate3d(0, 30%, 0) scale(0);
    -o-transform: translate3d(0, 30%, 0) scale(0);
    -ms-transform: translate3d(0, 30%, 0) scale(0);
    transform: translate3d(0, 30%, 0) scale(0)
}

.mv__liquidPh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1s infinite mv_fuwa;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1s infinite mv_fuwa;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1s infinite mv_fuwa;
    -ms-animation: mv_fuwa 2900ms infinite cubic-bezier(.455, .03, .515, .955) 1000ms;
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) 1s infinite mv_fuwa
}

.mv__liquidPh--2 {
    top: 110px;
    left: -10px;
    width: 112px;
    height: auto
}

.mv__bubble,
.mv__stars {
    position: absolute;
    opacity: 0
}

.mv__bubble--1 {
    top: 180px;
    left: -70px;
    width: 30px;
    -webkit-transform: translate3d(0, 20%, 0);
    -moz-transform: translate3d(0, 20%, 0);
    -o-transform: translate3d(0, 20%, 0);
    -ms-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0)
}

.mv__bubble--1 .mv__bubblePh {
    -webkit-animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble_slow;
    -moz-animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble_slow;
    -o-animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble_slow;
    -ms-animation: bubble_slow 3480ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble_slow
}

.mv__bubble--2 {
    top: 0;
    left: 400px;
    width: 33px;
    -webkit-transform: translate3d(0, 30%, 0);
    -moz-transform: translate3d(0, 30%, 0);
    -o-transform: translate3d(0, 30%, 0);
    -ms-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0)
}

.mv__bubble--2 .mv__bubblePh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.mv__bubble--3 {
    top: 150px;
    right: -220px;
    width: 32px;
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0)
}

.mv__bubble--3 .mv__bubblePh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse bubble_slow;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse bubble_slow;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse bubble_slow;
    -ms-animation: bubble_slow 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse bubble_slow
}

.mv__bubble--4 {
    width: 140px;
    top: 510px;
    right: -20px;
    -webkit-transform: translate3d(0, 5%, 0);
    -moz-transform: translate3d(0, 5%, 0);
    -o-transform: translate3d(0, 5%, 0);
    -ms-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0)
}

.mv__bubble--4 .mv__bubblePh {
    -webkit-animation: 5.8s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -moz-animation: 5.8s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -o-animation: 5.8s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -ms-animation: bubble 5800ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 5.8s cubic-bezier(.455, .03, .515, .955) infinite bubble
}

.mv__bubble--5 {
    top: 200px;
    right: -150px;
    width: 19px;
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0)
}

.mv__bubble--5 .mv__bubblePh {
    -webkit-animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -moz-animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -o-animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -ms-animation: bubble 3480ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 3.48s cubic-bezier(.455, .03, .515, .955) infinite bubble
}

.mv__bubblePh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite bubble;
    -ms-animation: bubble 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite bubble
}

@-moz-keyframes bubble {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -o-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
}

@-webkit-keyframes bubble {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -o-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
}

@-o-keyframes bubble {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -o-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
}

@keyframes bubble {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 50px, 0);
        -moz-transform: translate3d(0, 50px, 0);
        -o-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0)
    }
}

@-moz-keyframes bubble_slow {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
}

@-webkit-keyframes bubble_slow {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
}

@-o-keyframes bubble_slow {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
}

@keyframes bubble_slow {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 20px, 0);
        -moz-transform: translate3d(0, 20px, 0);
        -o-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
}

@-moz-keyframes bubble_slow2 {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        -moz-transform: translate3d(0, 10px, 0);
        -o-transform: translate3d(0, 10px, 0);
        -ms-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@-webkit-keyframes bubble_slow2 {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        -moz-transform: translate3d(0, 10px, 0);
        -o-transform: translate3d(0, 10px, 0);
        -ms-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@-o-keyframes bubble_slow2 {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        -moz-transform: translate3d(0, 10px, 0);
        -o-transform: translate3d(0, 10px, 0);
        -ms-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@keyframes bubble_slow2 {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        -moz-transform: translate3d(0, 10px, 0);
        -o-transform: translate3d(0, 10px, 0);
        -ms-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@-moz-keyframes bubble_slow_reverse {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, -20px, 0);
        -moz-transform: translate3d(0, -20px, 0);
        -o-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

@-webkit-keyframes bubble_slow_reverse {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, -20px, 0);
        -moz-transform: translate3d(0, -20px, 0);
        -o-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

@-o-keyframes bubble_slow_reverse {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, -20px, 0);
        -moz-transform: translate3d(0, -20px, 0);
        -o-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

@keyframes bubble_slow_reverse {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(0, -20px, 0);
        -moz-transform: translate3d(0, -20px, 0);
        -o-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

.mv__stars--1 {
    top: 320px;
    left: -20px;
    width: 75px;
    height: 110px
}

.mv__stars--2 {
    top: 170px;
    right: -40px;
    width: 63px;
    height: 83px
}

.mv__hearts {
    z-index: -1;
    top: 50px;
    left: 245px;
    width: 177px;
    height: 164px;
    opacity: 0
}

.mv__star,
.shop__star {
    -webkit-animation: 1s infinite boyon2;
    -moz-animation: 1s infinite boyon2;
    -o-animation: 1s infinite boyon2;
    -ms-animation: boyon2 1000ms ease infinite;
    animation: 1s infinite boyon2
}

.mv__star .mv__starPh {
    -webkit-animation: 2s linear infinite star;
    -moz-animation: 2s linear infinite star;
    -o-animation: 2s linear infinite star;
    -ms-animation: star 2000ms linear infinite;
    animation: 2s linear infinite star
}

@-moz-keyframes star {

    0%,
    100% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@-webkit-keyframes star {

    0%,
    100% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@-o-keyframes star {

    0%,
    100% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@keyframes star {

    0%,
    100% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    50% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

.mv__star--1 {
    top: 0;
    right: 0;
    width: 70px;
    aspect-ratio: .8235294117647058;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -ms-animation-delay: 500ms;
    animation-delay: .5s
}

.mv__star--1 .mv__starPh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.mv__star--2 {
    width: 43px;
    bottom: 0;
    left: 0;
    aspect-ratio: .7543859649122807
}

.mv__star--3 {
    top: 0;
    left: 0;
    width: 48px;
    aspect-ratio: .8571428571428571;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -ms-animation-delay: 500ms;
    animation-delay: .5s
}

.mv__star--3 .mv__starPh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.mv__star--4 {
    bottom: 10px;
    left: 10px;
    width: 68px;
    aspect-ratio: 1.0625
}

.mv__star--5 {
    bottom: 0;
    right: 0;
    width: 70px;
    aspect-ratio: .7777777777777778;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -ms-animation-delay: 500ms;
    animation-delay: .5s
}

.mv__star--5 .mv__starPh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.mv__star--6 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

@-moz-keyframes boyon2 {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

@-webkit-keyframes boyon2 {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

@-o-keyframes boyon2 {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

@keyframes boyon2 {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

.mv__heart {
    z-index: 1;
    top: -10px;
    left: 10px;
    width: 175px;
    aspect-ratio: 1.083870967741936
}

.mv__frame,
.mv__roseInner {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute
}

@-moz-keyframes boyon {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -o-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }

    24%,
    8% {
        -webkit-transform: scale(1.1) rotate(7deg);
        -moz-transform: scale(1.1) rotate(7deg);
        -o-transform: scale(1.1) rotate(7deg);
        -ms-transform: scale(1.1) rotate(7deg);
        transform: scale(1.1) rotate(7deg)
    }
}

@-webkit-keyframes boyon {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -o-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }

    24%,
    8% {
        -webkit-transform: scale(1.1) rotate(7deg);
        -moz-transform: scale(1.1) rotate(7deg);
        -o-transform: scale(1.1) rotate(7deg);
        -ms-transform: scale(1.1) rotate(7deg);
        transform: scale(1.1) rotate(7deg)
    }
}

@-o-keyframes boyon {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -o-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }

    24%,
    8% {
        -webkit-transform: scale(1.1) rotate(7deg);
        -moz-transform: scale(1.1) rotate(7deg);
        -o-transform: scale(1.1) rotate(7deg);
        -ms-transform: scale(1.1) rotate(7deg);
        transform: scale(1.1) rotate(7deg)
    }
}

@keyframes boyon {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -o-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }

    24%,
    8% {
        -webkit-transform: scale(1.1) rotate(7deg);
        -moz-transform: scale(1.1) rotate(7deg);
        -o-transform: scale(1.1) rotate(7deg);
        -ms-transform: scale(1.1) rotate(7deg);
        transform: scale(1.1) rotate(7deg)
    }
}

.mv__frame {
    z-index: 10;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mv__rose {
    position: absolute;
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.mv__rose--1 {
    z-index: 1;
    bottom: 65px;
    left: 15px;
    width: 250px;
    aspect-ratio: .51395657953035
}

.mv__rose--1 .mv__rosePh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse;
    -ms-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse
}

.mv__rose--2 {
    z-index: 0;
    bottom: 50px;
    left: 170px;
    width: 116px;
    aspect-ratio: .37647877522616563
}

.mv__rose--3 {
    bottom: 50px;
    right: 150px;
    width: 130px;
    aspect-ratio: .39407894736842103
}

.mv__rose--3 .mv__rosePh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse;
    -ms-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite reverse rose_reverse
}

@-moz-keyframes rose_reverse {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(-10%, 0, 0);
        -moz-transform: rotate(0) translate3d(-10%, 0, 0);
        -o-transform: rotate(0) translate3d(-10%, 0, 0);
        -ms-transform: rotate(0) translate3d(-10%, 0, 0);
        transform: rotate(0) translate3d(-10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes rose_reverse {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(-10%, 0, 0);
        -moz-transform: rotate(0) translate3d(-10%, 0, 0);
        -o-transform: rotate(0) translate3d(-10%, 0, 0);
        -ms-transform: rotate(0) translate3d(-10%, 0, 0);
        transform: rotate(0) translate3d(-10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-o-keyframes rose_reverse {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(-10%, 0, 0);
        -moz-transform: rotate(0) translate3d(-10%, 0, 0);
        -o-transform: rotate(0) translate3d(-10%, 0, 0);
        -ms-transform: rotate(0) translate3d(-10%, 0, 0);
        transform: rotate(0) translate3d(-10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes rose_reverse {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(-10%, 0, 0);
        -moz-transform: rotate(0) translate3d(-10%, 0, 0);
        -o-transform: rotate(0) translate3d(-10%, 0, 0);
        -ms-transform: rotate(0) translate3d(-10%, 0, 0);
        transform: rotate(0) translate3d(-10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

.mv__rose--4 {
    bottom: 40px;
    right: 15px;
    width: 250px;
    aspect-ratio: .4666666666666667
}

.mv__rosePh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite rose;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite rose;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite rose;
    -ms-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite rose
}

@-moz-keyframes rose {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(10%, 0, 0);
        -moz-transform: rotate(0) translate3d(10%, 0, 0);
        -o-transform: rotate(0) translate3d(10%, 0, 0);
        -ms-transform: rotate(0) translate3d(10%, 0, 0);
        transform: rotate(0) translate3d(10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }
}

@-webkit-keyframes rose {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(10%, 0, 0);
        -moz-transform: rotate(0) translate3d(10%, 0, 0);
        -o-transform: rotate(0) translate3d(10%, 0, 0);
        -ms-transform: rotate(0) translate3d(10%, 0, 0);
        transform: rotate(0) translate3d(10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }
}

@-o-keyframes rose {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(10%, 0, 0);
        -moz-transform: rotate(0) translate3d(10%, 0, 0);
        -o-transform: rotate(0) translate3d(10%, 0, 0);
        -ms-transform: rotate(0) translate3d(10%, 0, 0);
        transform: rotate(0) translate3d(10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }
}

@keyframes rose {

    0%,
    100% {
        -webkit-transform: rotate(0) translate3d(10%, 0, 0);
        -moz-transform: rotate(0) translate3d(10%, 0, 0);
        -o-transform: rotate(0) translate3d(10%, 0, 0);
        -ms-transform: rotate(0) translate3d(10%, 0, 0);
        transform: rotate(0) translate3d(10%, 0, 0)
    }

    50% {
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }
}

.mv__cloud {
    position: absolute;
    z-index: 1;
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}

.mv__cloud--1 {
    bottom: 0;
    left: 0;
    width: 483px
}

.mv__cloud--2 {
    bottom: 0;
    right: 400px;
    width: 360px
}

.mv__cloud--2 .mv__cloudPh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.mv__cloud--3 {
    right: 0;
    bottom: 0;
    width: 473px
}

.mv__cloudPh {
    -webkit-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa;
    -moz-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa;
    -o-animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa;
    -ms-animation: mv_fuwa 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: 2.9s cubic-bezier(.455, .03, .515, .955) infinite mv_fuwa
}

.op {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    z-index: 99;
    background-color: #fd3e66;
    -webkit-transition: opacity 1s 1s;
    -moz-transition: opacity 1s 1s;
    -o-transition: opacity 1s 1s;
    -ms-transition: opacity 1s 1s;
    transition: opacity 1s 1s
}

.op.fade-in .op__logoTxt {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity .8s cubic-bezier(.19, 1, .22, 1), -webkit-transform .8s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: opacity .8s cubic-bezier(.19, 1, .22, 1), -moz-transform .8s cubic-bezier(.19, 1, .22, 1);
    -o-transition: opacity .8s cubic-bezier(.19, 1, .22, 1), -o-transform .8s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: opacity .8s cubic-bezier(.19, 1, .22, 1), -ms-transform .8s cubic-bezier(.19, 1, .22, 1);
    transition: opacity .8s cubic-bezier(.19, 1, .22, 1), transform .8s cubic-bezier(.19, 1, .22, 1)
}

.op.fade-in .op__logoTxt--1 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s
}

.op.fade-in .op__logoTxt--2 {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.op.fade-in .op__logoTxt--3,
.op.fade-in .op__logoTxt--4 {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.op.fade-out .op__logo {
    -webkit-transform: translate3d(-50vw, -50svh, 0) scale(.85);
    -moz-transform: translate3d(-50vw, -50svh, 0) scale(.85);
    -o-transform: translate3d(-50vw, -50svh, 0) scale(.85);
    -ms-transform: translate3d(-50vw, -50svh, 0) scale(.85);
    transform: translate3d(-50vw, -50svh, 0) scale(.85);
    -webkit-transition: -webkit-transform .8s cubic-bezier(.44, .17, .26, .99);
    -moz-transition: -moz-transform .8s cubic-bezier(.44, .17, .26, .99);
    -o-transition: -o-transform .8s cubic-bezier(.44, .17, .26, .99);
    -ms-transition: -ms-transform .8s cubic-bezier(.44, .17, .26, .99);
    transition: transform .8s cubic-bezier(.44, .17, .26, .99)
}

.op.fade-out.hash-in .op__logo {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
    -webkit-transition: opacity 1s 1s;
    -moz-transition: opacity 1s 1s;
    -o-transition: opacity 1s 1s;
    -ms-transition: opacity 1s 1s;
    transition: opacity 1s 1s
}

.op__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 133px;
    padding: 20px 23px
}

.op__logo svg {
    overflow: visible
}

.op__logoTxt {
    opacity: 0;
    -webkit-transform: scale(1.05) translate3d(0, 0, 0);
    -moz-transform: scale(1.05) translate3d(0, 0, 0);
    -o-transform: scale(1.05) translate3d(0, 0, 0);
    -ms-transform: scale(1.05) translate3d(0, 0, 0);
    transform: scale(1.05) translate3d(0, 0, 0);
    transform-box: fill-box;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.product {
    position: relative;
    width: 100vw;
    height: 960px;
    padding: 100px 0 170px;
    background: -webkit-linear-gradient(90deg, #adffc3 5.7%, #e58584 26.14%, #fb536a 35.24%);
    background: -moz-linear-gradient(90deg, #adffc3 5.7%, #e58584 26.14%, #fb536a 35.24%);
    background: -o-linear-gradient(90deg, #adffc3 5.7%, #e58584 26.14%, #fb536a 35.24%);
    background: -ms-linear-gradient(90deg, #adffc3 5.7%, #e58584 26.14%, #fb536a 35.24%);
    background: linear-gradient(0deg, #adffc3 5.7%, #e58584 26.14%, #fb536a 35.24%)
}

.product__series {
    position: absolute;
    z-index: 1;
    top: 130px;
    right: 50px;
    width: 170px;
    opacity: 0
}

.product__canvas {
    position: relative;
    width: 100%;
    height: 100%
}

.product__canvas canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.product__canvasKira {
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 800px;
    height: 300px
}

.product__cards {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.product__card {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.17);
    -moz-transform: translate3d(-50%, -50%, 0) scale(1.17);
    -o-transform: translate3d(-50%, -50%, 0) scale(1.17);
    -ms-transform: translate3d(-50%, -50%, 0) scale(1.17);
    transform: translate3d(-50%, -50%, 0) scale(1.17);
    width: 326.1px;
    height: 566.69px;
    opacity: 0;
    box-sizing: border-box
}

.product__cardBack,
.product__cardFront {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    z-index: 1;
    overflow: hidden
}

.product__card.is-active {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout;
    -moz-animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout;
    -o-animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout;
    -ms-animation: cardout 1000ms cubic-bezier(.19, 1, .22, 1) forwards 750ms;
    animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout
}

.product__card.is-active .product__cardFront {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
    -webkit-transition: -webkit-transform .9s cubic-bezier(.25, .46, .45, .94);
    -moz-transition: -moz-transform .9s cubic-bezier(.25, .46, .45, .94);
    -o-transition: -o-transform .9s cubic-bezier(.25, .46, .45, .94);
    -ms-transition: -ms-transform .9s cubic-bezier(.25, .46, .45, .94);
    transition: transform .9s cubic-bezier(.25, .46, .45, .94)
}

.product__card.is-active .product__cardBack {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: -webkit-transform .9s cubic-bezier(.25, .46, .45, .94);
    -moz-transition: -moz-transform .9s cubic-bezier(.25, .46, .45, .94);
    -o-transition: -o-transform .9s cubic-bezier(.25, .46, .45, .94);
    -ms-transition: -ms-transform .9s cubic-bezier(.25, .46, .45, .94);
    transition: transform .9s cubic-bezier(.25, .46, .45, .94)
}

@-moz-keyframes cardout {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.17);
        transform: translate3d(-50%, -50%, 0) scale(1.17)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(2);
        -moz-transform: translate3d(-50%, -50%, 0) scale(2);
        -o-transform: translate3d(-50%, -50%, 0) scale(2);
        -ms-transform: translate3d(-50%, -50%, 0) scale(2);
        transform: translate3d(-50%, -50%, 0) scale(2)
    }
}

@-webkit-keyframes cardout {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.17);
        transform: translate3d(-50%, -50%, 0) scale(1.17)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(2);
        -moz-transform: translate3d(-50%, -50%, 0) scale(2);
        -o-transform: translate3d(-50%, -50%, 0) scale(2);
        -ms-transform: translate3d(-50%, -50%, 0) scale(2);
        transform: translate3d(-50%, -50%, 0) scale(2)
    }
}

@-o-keyframes cardout {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.17);
        transform: translate3d(-50%, -50%, 0) scale(1.17)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(2);
        -moz-transform: translate3d(-50%, -50%, 0) scale(2);
        -o-transform: translate3d(-50%, -50%, 0) scale(2);
        -ms-transform: translate3d(-50%, -50%, 0) scale(2);
        transform: translate3d(-50%, -50%, 0) scale(2)
    }
}

@keyframes cardout {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.17);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.17);
        transform: translate3d(-50%, -50%, 0) scale(1.17)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(2);
        -moz-transform: translate3d(-50%, -50%, 0) scale(2);
        -o-transform: translate3d(-50%, -50%, 0) scale(2);
        -ms-transform: translate3d(-50%, -50%, 0) scale(2);
        transform: translate3d(-50%, -50%, 0) scale(2)
    }
}

@-moz-keyframes cardout_sp {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.28);
        transform: translate3d(-50%, -50%, 0) scale(1.28)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.8);
        transform: translate3d(-50%, -50%, 0) scale(1.8)
    }
}

@-webkit-keyframes cardout_sp {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.28);
        transform: translate3d(-50%, -50%, 0) scale(1.28)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.8);
        transform: translate3d(-50%, -50%, 0) scale(1.8)
    }
}

@-o-keyframes cardout_sp {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.28);
        transform: translate3d(-50%, -50%, 0) scale(1.28)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.8);
        transform: translate3d(-50%, -50%, 0) scale(1.8)
    }
}

@keyframes cardout_sp {
    0% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.28);
        transform: translate3d(-50%, -50%, 0) scale(1.28)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.8);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.8);
        transform: translate3d(-50%, -50%, 0) scale(1.8)
    }
}

.product__cardInner {
    position: relative;
    width: 100%;
    height: 100%
}

.product__cardFront {
    position: absolute;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -o-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
    box-sizing: border-box;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    backface-visibility: hidden
}

.product__cardBack,
.shop__cont {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.product__cardBack,
.roll__txtInner span {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden
}

.product__cardBack {
    position: absolute;
    backface-visibility: hidden;
    border: 1px solid #000;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-sizing: border-box;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: -webkit-linear-gradient(90deg, #ffc7f6 0, #f9a1e7 11.92%, #f790e1 18.71%, #f786d0 21.58%, #f777b4 27.18%, #f76a9e 33.23%, #f7628f 39.88%, #f75d86 47.58%, #f75b83 58.78%, #fa3a6e 70.14%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: -moz-linear-gradient(90deg, #ffc7f6 0, #f9a1e7 11.92%, #f790e1 18.71%, #f786d0 21.58%, #f777b4 27.18%, #f76a9e 33.23%, #f7628f 39.88%, #f75d86 47.58%, #f75b83 58.78%, #fa3a6e 70.14%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: -o-linear-gradient(90deg, #ffc7f6 0, #f9a1e7 11.92%, #f790e1 18.71%, #f786d0 21.58%, #f777b4 27.18%, #f76a9e 33.23%, #f7628f 39.88%, #f75d86 47.58%, #f75b83 58.78%, #fa3a6e 70.14%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: -ms-linear-gradient(90deg, #ffc7f6 0, #f9a1e7 11.92%, #f790e1 18.71%, #f786d0 21.58%, #f777b4 27.18%, #f76a9e 33.23%, #f7628f 39.88%, #f75d86 47.58%, #f75b83 58.78%, #fa3a6e 70.14%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: linear-gradient(0deg, #ffc7f6 0, #f9a1e7 11.92%, #f790e1 18.71%, #f786d0 21.58%, #f777b4 27.18%, #f76a9e 33.23%, #f7628f 39.88%, #f75d86 47.58%, #f75b83 58.78%, #fa3a6e 70.14%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%)
}

.product__cardBackKira {
    position: absolute;
    z-index: 1;
    width: 42px
}

.product__cardBackKira--1 {
    top: 15px;
    left: 15px
}

.product__cardBackKira--2 {
    top: 15px;
    right: 15px
}

.product__cardBackKira--3 {
    bottom: 15px;
    left: 15px
}

.product__cardBackKira--4 {
    bottom: 15px;
    right: 15px
}

.product__cardBackLogo {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 92px
}

.product__btn {
    position: absolute;
    left: 50%;
    bottom: 170px;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    margin: 0 auto
}

.roll,
.shop {
    position: relative
}

.roll {
    z-index: 1;
    width: 100%
}

.roll--reverse .roll__cont {
    left: 50%;
    top: -280px;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

.roll--reverse .roll__contInner {
    -webkit-transform: scale(-1, -1) translate3d(200px, 0, 0);
    -moz-transform: scale(-1, -1) translate3d(200px, 0, 0);
    -o-transform: scale(-1, -1) translate3d(200px, 0, 0);
    -ms-transform: scale(-1, -1) translate3d(200px, 0, 0);
    transform: scale(-1, -1) translate3d(200px, 0, 0)
}

.roll__cont {
    position: absolute;
    top: -230px;
    left: 50%;
    width: 3347px;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

.roll__contInner {
    width: 100%;
    -webkit-transform: translate3d(200px, 0, 0);
    -moz-transform: translate3d(200px, 0, 0);
    -o-transform: translate3d(200px, 0, 0);
    -ms-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0)
}

.roll__bg {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0 auto
}

.roll__bg--red .roll__gradient,
.roll__bg--red .roll__gradient--start {
    stop-color: #fd3e66
}

.roll__bg--red .roll__gradient--center {
    stop-color: #fff
}

.roll__bg--red .roll__gradient--end {
    stop-color: #fd3e66
}

.roll__bg--yellow .roll__gradient,
.roll__bg--yellow .roll__gradient--start {
    stop-color: #f6ec53
}

.roll__bg--yellow .roll__gradient--center {
    stop-color: #fff
}

.roll__bg--yellow .roll__gradient--end {
    stop-color: #f6ec53
}

.roll__bg--purple .roll__gradient,
.roll__bg--purple .roll__gradient--start {
    stop-color: #c88af7
}

.roll__bg--purple .roll__gradient--center {
    stop-color: #fff
}

.roll__bg--purple .roll__gradient--end {
    stop-color: #c88af7
}

.roll__bg--blue .roll__gradient,
.roll__bg--blue .roll__gradient--start {
    stop-color: #028fdf
}

.roll__bg--blue .roll__gradient--center {
    stop-color: #fff
}

.roll__bg--blue .roll__gradient--end {
    stop-color: #028fdf
}

.roll__txt {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    -ms-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    width: 100%;
    font-size: 42px;
    font-weight: 800
}

.roll__txtInner span,
.topics.inview--enter .topics__item {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.roll__txtInner span {
    position: absolute;
    display: block;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden
}

.shop {
    z-index: 0;
    background: -webkit-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 12.52%, #f790e1 18.2%, #f786d0 21.3%, #f777b4 27.35%, #f76a9e 33.9%, #f7628f 41.09%, #f75d86 49.42%, #f75b83 61.52%, #fa3a6e 71.64%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: -moz-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 12.52%, #f790e1 18.2%, #f786d0 21.3%, #f777b4 27.35%, #f76a9e 33.9%, #f7628f 41.09%, #f75d86 49.42%, #f75b83 61.52%, #fa3a6e 71.64%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: -o-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 12.52%, #f790e1 18.2%, #f786d0 21.3%, #f777b4 27.35%, #f76a9e 33.9%, #f7628f 41.09%, #f75d86 49.42%, #f75b83 61.52%, #fa3a6e 71.64%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: -ms-linear-gradient(270deg, #ffc7f6 2.54%, #f9a1e7 12.52%, #f790e1 18.2%, #f786d0 21.3%, #f777b4 27.35%, #f76a9e 33.9%, #f7628f 41.09%, #f75d86 49.42%, #f75b83 61.52%, #fa3a6e 71.64%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%);
    background: linear-gradient(180deg, #ffc7f6 2.54%, #f9a1e7 12.52%, #f790e1 18.2%, #f786d0 21.3%, #f777b4 27.35%, #f76a9e 33.9%, #f7628f 41.09%, #f75d86 49.42%, #f75b83 61.52%, #fa3a6e 71.64%, #ff0c52 83.86%, #ff124e 87.43%, #ff2343 92.23%, #ff3f31 97.7%, #ff4d28 100%)
}

.shop__box,
.shop__boxWrap,
.shop__btns {
    position: relative;
    z-index: 1
}

.shop.inview--enter .shop__bomb {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s;
    -moz-transition: -moz-transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s;
    -o-transition: -o-transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s;
    -ms-transition: -ms-transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s;
    transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s
}

.shop.inview--enter .shop__bombInner {
    width: 100%;
    height: 100%;
    -webkit-animation: 3s 1.8s infinite bomb2;
    -moz-animation: 3s 1.8s infinite bomb2;
    -o-animation: 3s 1.8s infinite bomb2;
    -ms-animation: bomb2 3000ms ease infinite 1800ms;
    animation: 3s 1.8s infinite bomb2
}

.shop.inview--enter .shop__bomb--2 {
    -webkit-transition: -webkit-transform .5s cubic-bezier(.19, 1, .22, 1) .1s, opacity .5s .1s;
    -moz-transition: -moz-transform .5s cubic-bezier(.19, 1, .22, 1) .1s, opacity .5s .1s;
    -o-transition: -o-transform .5s cubic-bezier(.19, 1, .22, 1) .1s, opacity .5s .1s;
    -ms-transition: -ms-transform .5s cubic-bezier(.19, 1, .22, 1) .1s, opacity .5s .1s;
    transition: transform .5s cubic-bezier(.19, 1, .22, 1) .1s, opacity .5s .1s
}

.shop.inview--enter .shop__bomb--2 .shop__bombInner {
    -webkit-animation: 3s 3.6s infinite bomb2;
    -moz-animation: 3s 3.6s infinite bomb2;
    -o-animation: 3s 3.6s infinite bomb2;
    -ms-animation: bomb2 3000ms ease infinite 3600ms;
    animation: 3s 3.6s infinite bomb2
}

@-moz-keyframes bomb1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes bomb1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes bomb1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bomb1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    15% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -o-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02)
    }

    30% {
        -webkit-transform: scale(.99);
        -moz-transform: scale(.99);
        -o-transform: scale(.99);
        -ms-transform: scale(.99);
        transform: scale(.99)
    }

    100%,
    45% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes bomb2 {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@-webkit-keyframes bomb2 {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@-o-keyframes bomb2 {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@keyframes bomb2 {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@-moz-keyframes bomb2_sp {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(15deg);
        -moz-transform: scale(1) rotate(15deg);
        -o-transform: scale(1) rotate(15deg);
        -ms-transform: scale(1) rotate(15deg);
        transform: scale(1) rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2) rotate(15deg);
        -moz-transform: scale(1.2) rotate(15deg);
        -o-transform: scale(1.2) rotate(15deg);
        -ms-transform: scale(1.2) rotate(15deg);
        transform: scale(1.2) rotate(15deg)
    }
}

@-webkit-keyframes bomb2_sp {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(15deg);
        -moz-transform: scale(1) rotate(15deg);
        -o-transform: scale(1) rotate(15deg);
        -ms-transform: scale(1) rotate(15deg);
        transform: scale(1) rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2) rotate(15deg);
        -moz-transform: scale(1.2) rotate(15deg);
        -o-transform: scale(1.2) rotate(15deg);
        -ms-transform: scale(1.2) rotate(15deg);
        transform: scale(1.2) rotate(15deg)
    }
}

@-o-keyframes bomb2_sp {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(15deg);
        -moz-transform: scale(1) rotate(15deg);
        -o-transform: scale(1) rotate(15deg);
        -ms-transform: scale(1) rotate(15deg);
        transform: scale(1) rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2) rotate(15deg);
        -moz-transform: scale(1.2) rotate(15deg);
        -o-transform: scale(1.2) rotate(15deg);
        -ms-transform: scale(1.2) rotate(15deg);
        transform: scale(1.2) rotate(15deg)
    }
}

@keyframes bomb2_sp {

    0%,
    100%,
    16%,
    32% {
        -webkit-transform: scale(1) rotate(15deg);
        -moz-transform: scale(1) rotate(15deg);
        -o-transform: scale(1) rotate(15deg);
        -ms-transform: scale(1) rotate(15deg);
        transform: scale(1) rotate(15deg)
    }

    24%,
    8% {
        -webkit-transform: scale(1.2) rotate(15deg);
        -moz-transform: scale(1.2) rotate(15deg);
        -o-transform: scale(1.2) rotate(15deg);
        -ms-transform: scale(1.2) rotate(15deg);
        transform: scale(1.2) rotate(15deg)
    }
}

.shop.inview--enter .shop__boxWrap {
    -webkit-animation: 1.5s .3s forwards bomb1;
    -moz-animation: 1.5s .3s forwards bomb1;
    -o-animation: 1.5s .3s forwards bomb1;
    -ms-animation: bomb1 1500ms ease forwards 300ms;
    animation: 1.5s .3s forwards bomb1
}

.shop.inview--enter .shop__hearts {
    -webkit-animation: 2s .5s forwards bomb1, 2.3s cubic-bezier(.455, .03, .515, .955) 1s infinite bubble_slow;
    -moz-animation: 2s .5s forwards bomb1, 2.3s cubic-bezier(.455, .03, .515, .955) 1s infinite bubble_slow;
    -o-animation: 2s .5s forwards bomb1, 2.3s cubic-bezier(.455, .03, .515, .955) 1s infinite bubble_slow;
    -ms-animation: bomb1 2000ms ease forwards 500ms, bubble_slow 2300ms infinite cubic-bezier(.455, .03, .515, .955) 1000ms;
    animation: 2s .5s forwards bomb1, 2.3s cubic-bezier(.455, .03, .515, .955) 1s infinite bubble_slow
}

.shop.inview--enter .shop__heartPh {
    -webkit-animation: 2.8s 2s infinite boyon;
    -moz-animation: 2.8s 2s infinite boyon;
    -o-animation: 2.8s 2s infinite boyon;
    -ms-animation: boyon 2800ms ease infinite 2000ms;
    animation: 2.8s 2s infinite boyon
}

.shop__cont {
    position: relative;
    width: clamp(90.078125px, 90.078125vw, 1153px);
    height: clamp(78.125px, 78.125vw, 1000px);
    margin: 0 auto;
    padding: clamp(23.4375px, 23.4375vw, 300px) 0 clamp(16.40625px, 16.40625vw, 210px);
    display: box;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    box-sizing: border-box
}

.shop__boxWrap {
    opacity: 0;
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    -o-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95)
}

.shop__boxWrap:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: clamp(.46875px, .46875vw, 6px);
    left: clamp(.46875px, .46875vw, 6px);
    right: clamp(-6px, -.46875vw, -.46875px);
    bottom: clamp(-6px, -.46875vw, -.46875px);
    background-color: #000;
    border-radius: 4.53125vw;
    -webkit-transition: border-radius .3s;
    -moz-transition: border-radius .3s;
    -o-transition: border-radius .3s;
    -ms-transition: border-radius .3s;
    transition: border-radius .3s
}

.shop__box {
    width: clamp(43.515625px, 43.515625vw, 557px);
    height: clamp(9.140625px, 9.140625vw, 117px);
    padding: clamp(.78125px, .78125vw, 10px) 0 0;
    background-color: #eee;
    border-radius: 4.53125vw;
    text-align: center;
    border: 3px solid #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: height .25s, border-radius .25s;
    -moz-transition: height .25s, border-radius .25s;
    -o-transition: height .25s, border-radius .25s;
    -ms-transition: height .25s, border-radius .25s;
    transition: height .25s, border-radius .25s;
    cursor: pointer
}

.shop__box.is-opened {
    height: clamp(35.9375px, 35.9375vw, 460px)
}

.shop__box.is-opened .shop__boxInner:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.shop__box--2.is-opened {
    height: clamp(35.9375px, 35.9375vw, 460px) !important
}

.shop__boxInner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.shop__boxInner:before {
    content: '';
    position: absolute;
    top: clamp(3.515625px, 3.515625vw, 45px);
    right: clamp(3.5546875px, 3.5546875vw, 45.5px);
    width: clamp(1.5625px, 1.5625vw, 20px);
    height: 2px;
    background-color: #000
}

.shop__boxInner:after {
    content: '';
    position: absolute;
    top: clamp(2.8125px, 2.8125vw, 36px);
    right: clamp(4.2578125px, 4.2578125vw, 54.5px);
    width: 2px;
    height: clamp(1.5625px, 1.5625vw, 20px);
    background-color: #000;
    -webkit-transition: -webkit-transform .2s;
    -moz-transition: -moz-transform .2s;
    -o-transition: -o-transform .2s;
    -ms-transition: -ms-transform .2s;
    transition: transform .2s
}

.shop__ttl {
    font-size: clamp(4.0625px, 4.0625vw, 52px);
    font-weight: 800;
    line-height: 1.730769230769231;
    text-align: center
}

.shop__btns {
    margin: clamp(1.953125px, 1.953125vw, 25px) auto 0;
    width: auto;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.shop__bg,
.shop__bomb,
.shop__deco,
.shop__heart,
.shop__hearts {
    position: absolute
}

.shop__list {
    width: clamp(36.71875px, 36.71875vw, 470px);
    margin: clamp(.78125px, .78125vw, 10px) auto 0;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: left;
    -moz-box-pack: left;
    -o-box-pack: left;
    -ms-flex-pack: left;
    -webkit-justify-content: left;
    justify-content: left
}

.shop__item {
    -webkit-flex-shrink: 0;
    flex-shrink: 0
}

.shop__item:nth-child(odd) {
    width: clamp(21.09375px, 21.09375vw, 270px)
}

.shop__item:nth-child(2n) {
    width: clamp(15.625px, 15.625vw, 200px)
}

.shop .kira--1,
.shop .kira--2 {
    width: clamp(3.28125px, 3.28125vw, 42px)
}

.shop__itemTxt {
    font-size: clamp(1.25px, 1.25vw, 16px);
    line-height: 1.875;
    font-weight: 600;
    text-align: left
}

.shop__note {
    margin: clamp(.78125px, .78125vw, 10px) 0 0;
    font-size: clamp(.9375px, .9375vw, 12px);
    line-height: 3.75;
    font-weight: 400;
    text-align: center;
    letter-spacing: .06em
}

.shop__bg {
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.shop__deco {
    z-index: -1
}

.shop__deco--1 {
    z-index: 1;
    width: clamp(29.140624999999996px, 29.140624999999996vw, 373px);
    left: clamp(-33px, -2.578125vw, -2.578125px);
    bottom: clamp(-115px, -8.984375vw, -8.984375px);
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    -webkit-animation: 4s infinite rote;
    -moz-animation: 4s infinite rote;
    -o-animation: 4s infinite rote;
    -ms-animation: rote 4000ms ease infinite;
    animation: 4s infinite rote
}

@-moz-keyframes rote {

    0%,
    100%,
    80% {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        -moz-transform: rotate3d(0, 1, 0, 0deg);
        -o-transform: rotate3d(0, 1, 0, 0deg);
        -ms-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 1, 0, 360deg);
        -moz-transform: rotate3d(0, 1, 0, 360deg);
        -o-transform: rotate3d(0, 1, 0, 360deg);
        -ms-transform: rotate3d(0, 1, 0, 360deg);
        transform: rotate3d(0, 1, 0, 360deg)
    }
}

@-webkit-keyframes rote {

    0%,
    100%,
    80% {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        -moz-transform: rotate3d(0, 1, 0, 0deg);
        -o-transform: rotate3d(0, 1, 0, 0deg);
        -ms-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 1, 0, 360deg);
        -moz-transform: rotate3d(0, 1, 0, 360deg);
        -o-transform: rotate3d(0, 1, 0, 360deg);
        -ms-transform: rotate3d(0, 1, 0, 360deg);
        transform: rotate3d(0, 1, 0, 360deg)
    }
}

@-o-keyframes rote {

    0%,
    100%,
    80% {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        -moz-transform: rotate3d(0, 1, 0, 0deg);
        -o-transform: rotate3d(0, 1, 0, 0deg);
        -ms-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 1, 0, 360deg);
        -moz-transform: rotate3d(0, 1, 0, 360deg);
        -o-transform: rotate3d(0, 1, 0, 360deg);
        -ms-transform: rotate3d(0, 1, 0, 360deg);
        transform: rotate3d(0, 1, 0, 360deg)
    }
}

@keyframes rote {

    0%,
    100%,
    80% {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        -moz-transform: rotate3d(0, 1, 0, 0deg);
        -o-transform: rotate3d(0, 1, 0, 0deg);
        -ms-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 1, 0, 360deg);
        -moz-transform: rotate3d(0, 1, 0, 360deg);
        -o-transform: rotate3d(0, 1, 0, 360deg);
        -ms-transform: rotate3d(0, 1, 0, 360deg);
        transform: rotate3d(0, 1, 0, 360deg)
    }
}

.shop__deco--2 {
    display: inline-block;
    width: clamp(32.109375px, 32.109375vw, 411px);
    right: clamp(-140px, -10.9375vw, -10.9375px);
    bottom: clamp(-170px, -13.28125vw, -13.28125px);
    -webkit-animation: 7s ease-in-out infinite fuwa;
    -moz-animation: 7s ease-in-out infinite fuwa;
    -o-animation: 7s ease-in-out infinite fuwa;
    -ms-animation: fuwa 7000ms ease-in-out infinite;
    animation: 7s ease-in-out infinite fuwa
}

@-moz-keyframes fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-transform: translate3d(-10%, -10%, 0);
        -moz-transform: translate3d(-10%, -10%, 0);
        -o-transform: translate3d(-10%, -10%, 0);
        -ms-transform: translate3d(-10%, -10%, 0);
        transform: translate3d(-10%, -10%, 0)
    }

    60% {
        -webkit-transform: translate3d(0, -20%, 0);
        -moz-transform: translate3d(0, -20%, 0);
        -o-transform: translate3d(0, -20%, 0);
        -ms-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }
}

@-webkit-keyframes fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-transform: translate3d(-10%, -10%, 0);
        -moz-transform: translate3d(-10%, -10%, 0);
        -o-transform: translate3d(-10%, -10%, 0);
        -ms-transform: translate3d(-10%, -10%, 0);
        transform: translate3d(-10%, -10%, 0)
    }

    60% {
        -webkit-transform: translate3d(0, -20%, 0);
        -moz-transform: translate3d(0, -20%, 0);
        -o-transform: translate3d(0, -20%, 0);
        -ms-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }
}

@-o-keyframes fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-transform: translate3d(-10%, -10%, 0);
        -moz-transform: translate3d(-10%, -10%, 0);
        -o-transform: translate3d(-10%, -10%, 0);
        -ms-transform: translate3d(-10%, -10%, 0);
        transform: translate3d(-10%, -10%, 0)
    }

    60% {
        -webkit-transform: translate3d(0, -20%, 0);
        -moz-transform: translate3d(0, -20%, 0);
        -o-transform: translate3d(0, -20%, 0);
        -ms-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }
}

@keyframes fuwa {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    30% {
        -webkit-transform: translate3d(-10%, -10%, 0);
        -moz-transform: translate3d(-10%, -10%, 0);
        -o-transform: translate3d(-10%, -10%, 0);
        -ms-transform: translate3d(-10%, -10%, 0);
        transform: translate3d(-10%, -10%, 0)
    }

    60% {
        -webkit-transform: translate3d(0, -20%, 0);
        -moz-transform: translate3d(0, -20%, 0);
        -o-transform: translate3d(0, -20%, 0);
        -ms-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0)
    }
}

.shop__bomb {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .6s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .6s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .6s cubic-bezier(.19, 1, .22, 1);
    transition: transform .6s cubic-bezier(.19, 1, .22, 1)
}

.shop__bombInner,
.topics__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.shop__bomb--1 {
    width: clamp(38.125px, 38.125vw, 488px);
    aspect-ratio: 1;
    top: clamp(13.28125px, 13.28125vw, 170px);
    left: clamp(9.765625px, 9.765625vw, 125px)
}

.shop__bomb--2 {
    width: clamp(57.8125px, 57.8125vw, 740px);
    aspect-ratio: 1;
    top: clamp(0, 0, 0);
    right: clamp(1.5625px, 1.5625vw, 20px)
}

.shop .kira--1 {
    top: clamp(14.84375px, 14.84375vw, 190px);
    left: clamp(1.5625px, 1.5625vw, 20px)
}

.shop .kira--2 {
    top: clamp(10.9375px, 10.9375vw, 140px);
    right: clamp(-10px, -.78125vw, -.78125px)
}

.shop .kira--3 {
    width: clamp(6.71875px, 6.71875vw, 86px);
    bottom: clamp(5.46875px, 5.46875vw, 70px);
    right: clamp(.78125px, .78125vw, 10px)
}

.shop .circle--1,
.shop .circle--2 {
    width: clamp(1.328125px, 1.328125vw, 17px);
    height: clamp(1.328125px, 1.328125vw, 17px)
}

.shop .circle {
    z-index: 1
}

.shop .circle--1 {
    top: clamp(12.5px, 12.5vw, 160px);
    left: clamp(7.03125px, 7.03125vw, 90px)
}

.shop .circle--2 {
    top: clamp(7.03125px, 7.03125vw, 90px);
    right: clamp(10.15625px, 10.15625vw, 130px)
}

.shop__hearts {
    z-index: 10;
    top: clamp(-170px, -13.28125vw, -13.28125px);
    right: clamp(1.953125px, 1.953125vw, 25px);
    width: clamp(17.34375px, 17.34375vw, 222px);
    height: clamp(15.625px, 15.625vw, 200px);
    opacity: 0
}

.shop__heart {
    z-index: 1;
    top: clamp(-15px, -1.171875vw, -1.171875px);
    left: clamp(1.171875px, 1.171875vw, 15px);
    width: clamp(16.40625px, 16.40625vw, 210px);
    height: clamp(15.234375px, 15.234375vw, 195px)
}

.shop__star--1 {
    top: 0;
    left: 0;
    width: clamp(4.453125px, 4.453125vw, 57px);
    aspect-ratio: .7808219178082192;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -ms-animation-delay: 500ms;
    animation-delay: .5s
}

.shop__star--2,
.shop__star--3 {
    width: clamp(6.640625px, 6.640625vw, 85px)
}

.shop__star--1 .mv__starPh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.shop__star--2 {
    left: clamp(1.5625px, 1.5625vw, 20px);
    bottom: clamp(1.5625px, 1.5625vw, 20px);
    aspect-ratio: 1.133333333333333
}

.shop__star--3 {
    right: 0;
    bottom: 0;
    aspect-ratio: .7727272727272727;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    -ms-animation-delay: 500ms;
    animation-delay: .5s
}

.shop__star--3 .mv__starPh {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1000ms;
    animation-delay: 1s
}

.shop__starPh {
    -webkit-animation: 2s linear infinite star;
    -moz-animation: 2s linear infinite star;
    -o-animation: 2s linear infinite star;
    -ms-animation: star 2000ms linear infinite;
    animation: 2s linear infinite star
}

.special {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
    overflow: hidden
}

.special__A {
    width: 100%;
    height: 100%;
    display: inline-block
}

@media screen and (min-width:737px) {
    .modal.is-overflow .modal__btn:hover .modal__btnInner {
        -webkit-transform: translate3d(.234375vw, .234375vw, 0);
        -moz-transform: translate3d(.234375vw, .234375vw, 0);
        -o-transform: translate3d(.234375vw, .234375vw, 0);
        -ms-transform: translate3d(.234375vw, .234375vw, 0);
        transform: translate3d(.234375vw, .234375vw, 0)
    }

    .modal.is-overflow .modal__btn:hover .modal__btnInner:before {
        -webkit-transform: translate3d(-.390625vw, -.390625vw, 0);
        -moz-transform: translate3d(-.390625vw, -.390625vw, 0);
        -o-transform: translate3d(-.390625vw, -.390625vw, 0);
        -ms-transform: translate3d(-.390625vw, -.390625vw, 0);
        transform: translate3d(-.390625vw, -.390625vw, 0)
    }

    .modal3d__close:hover,
    .modalConcept__close:hover,
    .modal__close:hover {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .modal__openner3D:hover .modal__btn3DInner {
        -webkit-transform: translate3d(1.5px, 1.5px, 0);
        -moz-transform: translate3d(1.5px, 1.5px, 0);
        -o-transform: translate3d(1.5px, 1.5px, 0);
        -ms-transform: translate3d(1.5px, 1.5px, 0);
        transform: translate3d(1.5px, 1.5px, 0)
    }

    .modal__openner3D:hover .modal__btn3DInner:before {
        -webkit-transform: translate3d(-3px, -3px, 0);
        -moz-transform: translate3d(-3px, -3px, 0);
        -o-transform: translate3d(-3px, -3px, 0);
        -ms-transform: translate3d(-3px, -3px, 0);
        transform: translate3d(-3px, -3px, 0)
    }

    .modal__btn:hover .modal__btnInner {
        -webkit-transform: translate3d(clamp(.375px, .375vh, 3px), clamp(.375px, .375vh, 3px), 0);
        -moz-transform: translate3d(clamp(.375px, .375vh, 3px), clamp(.375px, .375vh, 3px), 0);
        -o-transform: translate3d(clamp(.375px, .375vh, 3px), clamp(.375px, .375vh, 3px), 0);
        -ms-transform: translate3d(clamp(.375px, .375vh, 3px), clamp(.375px, .375vh, 3px), 0);
        transform: translate3d(clamp(.375px, .375vh, 3px), clamp(.375px, .375vh, 3px), 0)
    }

    .modal__btn:hover .modal__btnInner:before {
        -webkit-transform: translate3d(clamp(-5px, -.625vh, -.625px), clamp(-5px, -.625vh, -.625px), 0);
        -moz-transform: translate3d(clamp(-5px, -.625vh, -.625px), clamp(-5px, -.625vh, -.625px), 0);
        -o-transform: translate3d(clamp(-5px, -.625vh, -.625px), clamp(-5px, -.625vh, -.625px), 0);
        -ms-transform: translate3d(clamp(-5px, -.625vh, -.625px), clamp(-5px, -.625vh, -.625px), 0);
        transform: translate3d(clamp(-5px, -.625vh, -.625px), clamp(-5px, -.625vh, -.625px), 0)
    }

    .special__A:hover .moreBtn__inner {
        -webkit-transform: translate3d(3px, 3px, 0);
        -moz-transform: translate3d(3px, 3px, 0);
        -o-transform: translate3d(3px, 3px, 0);
        -ms-transform: translate3d(3px, 3px, 0);
        transform: translate3d(3px, 3px, 0)
    }

    .special__A:hover .moreBtn__inner:before {
        -webkit-transform: translate3d(-5px, -5px, 0);
        -moz-transform: translate3d(-5px, -5px, 0);
        -o-transform: translate3d(-5px, -5px, 0);
        -ms-transform: translate3d(-5px, -5px, 0);
        transform: translate3d(-5px, -5px, 0)
    }
}

.special__movieInner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    object-fit: cover
}

.special__movieInner iframe {
    position: absolute;
    z-index: -1;
    top: -50%;
    left: 50%;
    width: 100%;
    height: 200%;
    -webkit-transform: scale(1.02) translate3d(-50%, 0, 0);
    -moz-transform: scale(1.02) translate3d(-50%, 0, 0);
    -o-transform: scale(1.02) translate3d(-50%, 0, 0);
    -ms-transform: scale(1.02) translate3d(-50%, 0, 0);
    transform: scale(1.02) translate3d(-50%, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none
}

.special__btn {
    position: absolute;
    left: 50%;
    bottom: 130px;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    margin: 0 auto
}

.topics {
    position: relative;
    z-index: 0
}

.topics__bg,
.topics__deco,
.topics__decoItem--kira {
    position: absolute
}

.topics.inview--enter .topics__item {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1);
    transition: transform .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1)
}

.topics.inview--enter .topics__item:first-child {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.topics.inview--enter .topics__item:first-child .topicsItem__ttl {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    transition-delay: 150ms
}

.topics.inview--enter .topics__item:nth-child(2) {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s
}

.topics.inview--enter .topics__item:nth-child(2) .topicsItem__ttl {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    transition-delay: 350ms
}

.topics.inview--enter .topics__item:nth-child(3) {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.topics.inview--enter .topics__item:nth-child(3) .topicsItem__ttl {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    transition-delay: 250ms
}

.topics.inview--enter .topics__item:nth-child(4) {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.topics.inview--enter .topics__item:nth-child(4) .topicsItem__ttl {
    -webkit-transition-delay: 450ms;
    -moz-transition-delay: 450ms;
    -o-transition-delay: 450ms;
    -ms-transition-delay: 450ms;
    transition-delay: 450ms
}

.topics.inview--enter .topicsItem__ttl {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1);
    -moz-transition: -moz-transform .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1);
    -o-transition: -o-transform .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1);
    -ms-transition: -ms-transform .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1);
    transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .6s cubic-bezier(.19, 1, .22, 1)
}

.topics__bg {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex
}

.topics__bg--1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.topics__bg--1 .topics__bgPh {
    margin-top: auto;
    width: auto;
    height: 80%;
    aspect-ratio: 2.549800796812749;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-animation: 100s linear infinite roll;
    -moz-animation: 100s linear infinite roll;
    -o-animation: 100s linear infinite roll;
    -ms-animation: roll 100000ms linear infinite;
    animation: 100s linear infinite roll
}

.topics__bg--1 .topics__bgPh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -o-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01)
}

@-moz-keyframes roll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@-webkit-keyframes roll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@-o-keyframes roll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes roll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.topics__bg--2 {
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 0%, #000 65%, transparent 100%);
    mask-size: cover;
    mask-position: bottom;
    mask-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform, mask-image
}

.topics__bg--2 .topics__bgPh {
    width: auto;
    height: 100%;
    aspect-ratio: 2.549800796812749;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-animation: 120s linear infinite roll2;
    -moz-animation: 120s linear infinite roll2;
    -o-animation: 120s linear infinite roll2;
    -ms-animation: roll2 120000ms linear infinite;
    animation: 120s linear infinite roll2
}

.topics__bg--2 .topics__bgPh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scale(1.001);
    -moz-transform: scale(1.001);
    -o-transform: scale(1.001);
    -ms-transform: scale(1.001);
    transform: scale(1.001)
}

@-moz-keyframes roll2 {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-webkit-keyframes roll2 {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@-o-keyframes roll2 {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes roll2 {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.topics__deco {
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-animation: 60s infinite random;
    -moz-animation: 60s infinite random;
    -o-animation: 60s infinite random;
    -ms-animation: random 60000ms ease infinite;
    animation: 60s infinite random
}

.topics__deco--1 {
    left: clamp(9.375px, 9.375vw, 120px);
    bottom: clamp(23.4375px, 23.4375vw, 300px);
    width: clamp(11.953125px, 11.953125vw, 153px);
    -webkit-animation: 60s infinite reverse random;
    -moz-animation: 60s infinite reverse random;
    -o-animation: 60s infinite reverse random;
    -ms-animation: random 60000ms ease infinite reverse;
    animation: 60s infinite reverse random
}

.topics__deco--1 .topics__decoItem--kira {
    width: clamp(5.859375px, 5.859375vw, 75px);
    top: clamp(-30px, -2.34375vw, -2.34375px);
    left: clamp(.78125px, .78125vw, 10px)
}

.topics__deco--1 .topics__decoItem--bubble {
    width: clamp(4.140625px, 4.140625vw, 53px)
}

.topics__deco--2 {
    top: clamp(9.375px, 9.375vw, 120px);
    right: clamp(9.375px, 9.375vw, 120px);
    width: clamp(13.28125px, 13.28125vw, 170px)
}

.topics__deco--2 .topics__decoItem--kira {
    width: clamp(11.71875px, 11.71875vw, 150px);
    top: clamp(-60px, -4.6875vw, -4.6875px);
    left: clamp(-60px, -4.6875vw, -4.6875px);
    -webkit-animation: 1s linear infinite kira;
    -moz-animation: 1s linear infinite kira;
    -o-animation: 1s linear infinite kira;
    -ms-animation: kira 1000ms linear infinite;
    animation: 1s linear infinite kira
}

.topics__deco--2 .topics__decoItem--bubble {
    width: clamp(6.25px, 6.25vw, 80px)
}

@-moz-keyframes random {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    40% {
        -webkit-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -moz-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -o-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -ms-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0)
    }

    60% {
        -webkit-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    80% {
        -webkit-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -moz-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -o-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -ms-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0)
    }
}

@-webkit-keyframes random {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    40% {
        -webkit-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -moz-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -o-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -ms-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0)
    }

    60% {
        -webkit-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    80% {
        -webkit-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -moz-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -o-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -ms-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0)
    }
}

@-o-keyframes random {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    40% {
        -webkit-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -moz-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -o-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -ms-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0)
    }

    60% {
        -webkit-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    80% {
        -webkit-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -moz-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -o-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -ms-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0)
    }
}

@keyframes random {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(11.71875px, 11.71875vw, 150px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    40% {
        -webkit-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -moz-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -o-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        -ms-transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0);
        transform: translate3d(clamp(9.375px, 9.375vw, 120px), clamp(-50px, -3.90625vw, -3.90625px), 0)
    }

    60% {
        -webkit-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -moz-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -o-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        -ms-transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0);
        transform: translate3d(clamp(-80px, -6.25vw, -6.25px), clamp(5.46875px, 5.46875vw, 70px), 0)
    }

    80% {
        -webkit-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -moz-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -o-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        -ms-transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0);
        transform: translate3d(clamp(-40px, -3.125vw, -3.125px), clamp(-30px, -2.34375vw, -2.34375px), 0)
    }
}

@-moz-keyframes random_sp {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(20vw, 9.333333333333334vw, 0);
        transform: translate3d(20vw, 9.333333333333334vw, 0)
    }

    40% {
        -webkit-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -moz-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -o-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -ms-transform: translate3d(16vw, -6.666666666666667vw, 0);
        transform: translate3d(16vw, -6.666666666666667vw, 0)
    }

    60% {
        -webkit-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0)
    }

    80% {
        -webkit-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -moz-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -o-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -ms-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        transform: translate3d(-5.333333333333333vw, -4vw, 0)
    }
}

@-webkit-keyframes random_sp {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(20vw, 9.333333333333334vw, 0);
        transform: translate3d(20vw, 9.333333333333334vw, 0)
    }

    40% {
        -webkit-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -moz-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -o-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -ms-transform: translate3d(16vw, -6.666666666666667vw, 0);
        transform: translate3d(16vw, -6.666666666666667vw, 0)
    }

    60% {
        -webkit-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0)
    }

    80% {
        -webkit-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -moz-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -o-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -ms-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        transform: translate3d(-5.333333333333333vw, -4vw, 0)
    }
}

@-o-keyframes random_sp {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(20vw, 9.333333333333334vw, 0);
        transform: translate3d(20vw, 9.333333333333334vw, 0)
    }

    40% {
        -webkit-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -moz-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -o-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -ms-transform: translate3d(16vw, -6.666666666666667vw, 0);
        transform: translate3d(16vw, -6.666666666666667vw, 0)
    }

    60% {
        -webkit-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0)
    }

    80% {
        -webkit-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -moz-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -o-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -ms-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        transform: translate3d(-5.333333333333333vw, -4vw, 0)
    }
}

@keyframes random_sp {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    20% {
        -webkit-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(20vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(20vw, 9.333333333333334vw, 0);
        transform: translate3d(20vw, 9.333333333333334vw, 0)
    }

    40% {
        -webkit-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -moz-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -o-transform: translate3d(16vw, -6.666666666666667vw, 0);
        -ms-transform: translate3d(16vw, -6.666666666666667vw, 0);
        transform: translate3d(16vw, -6.666666666666667vw, 0)
    }

    60% {
        -webkit-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -moz-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -o-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        -ms-transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0);
        transform: translate3d(-10.666666666666666vw, 9.333333333333334vw, 0)
    }

    80% {
        -webkit-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -moz-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -o-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        -ms-transform: translate3d(-5.333333333333333vw, -4vw, 0);
        transform: translate3d(-5.333333333333333vw, -4vw, 0)
    }
}

.topics__decoItem--bubble {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: 10s linear infinite kuru;
    -moz-animation: 10s linear infinite kuru;
    -o-animation: 10s linear infinite kuru;
    -ms-animation: kuru 10000ms linear infinite;
    animation: 10s linear infinite kuru
}

@-moz-keyframes kuru {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes kuru {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes kuru {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes kuru {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.topics__cont {
    padding: 150px 0 130px
}

.topics__list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -moz-box-align: end;
    -o-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: clamp(92.1875px, 92.1875vw, 1180px);
    gap: clamp(1.5625px, 1.5625vw, 20px);
    margin: 0 auto
}

.topics__item {
    width: clamp(21.875px, 21.875vw, 280px);
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    -moz-transform: translate3d(0, 10%, 0);
    -o-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    margin: 0 0 clamp(6.875000000000001px, 6.875000000000001vw, 88px)
}

.topics__item:nth-child(2n) {
    margin: 0
}

.topics__item .topicsItem__ttl {
    -webkit-transform: translate3d(0, 50%, 0);
    -moz-transform: translate3d(0, 50%, 0);
    -o-transform: translate3d(0, 50%, 0);
    -ms-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 0
}

.topics__item .topicsItem__ph {
    width: 100%;
    height: 100%
}

.topics__item .topicsItem__ph img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.topics__btn {
    margin: 70px 0 0
}

@media screen and (max-width:736px) {

    .concept__btn .moreBtn__txt,
    .concept__lead {
        font-size: 3.333333333333333vw
    }

    .concept__cont {
        padding-bottom: 13.333333333333334vw;
        /* background-image: url("/assets/images/top/concept_bg-sp.webp") */
    }

    .concept__innerWrap,
    .mv__productsWrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh
    }

    .concept__ttl {
        width: 66.66666666666667vw;
        margin: -20vw auto 0
    }

    .concept__lead {
        margin: 2.666666666666667vw 0 10.666666666666666vw;
        line-height: 2.08
    }

    .concept__logo {
        width: 38.8vw
    }

    .concept__btn {
        position: relative;
        z-index: 1;
        margin: 8vw auto 0
    }

    .concept__btn .moreBtn {
        width: 49.6vw;
        aspect-ratio: 5.027027027027027
    }

    .modal.is-overflow .modal__copyTxt sup,
    .modal__copyTxt sup {
        padding-left: .6666666666666666vw;
        font-size: 2.4vw
    }

    .modal--5 .modal__name-en {
        letter-spacing: .01em
    }

    .modal.is-overflow .modal__content {
        width: 170.66666666666666vw
    }

    .modal.is-overflow .modal__flex {
        width: auto;
        padding: 4.666666666666667vw 0
    }

    .modal.is-overflow .modal__ph {
        width: 73.33333333333333vw
    }

    .modal.is-overflow .modal__btn3D {
        bottom: 4.666666666666667vw;
        right: 4.666666666666667vw;
        width: 10.8vw
    }

    .modal.is-overflow .modal__txtBox {
        width: 85.33333333333333vw
    }

    .modal.is-overflow .modal__name-en {
        margin: 11.066666666666666vw 0 0;
        font-size: 5.333333333333333vw
    }

    .modal.is-overflow .modal__name-jp {
        margin: 1.333333333333333vw 0 0;
        font-size: 3.733333333333333vw
    }

    .modal.is-overflow .modal__note {
        margin: 2vw 0 0;
        font-size: 3.733333333333333vw
    }

    .modal.is-overflow .modal__copy {
        margin: 4vw 0 0;
        font-size: 5.333333333333333vw
    }

    .modal.is-overflow .modal__copy--5 {
        font-size: 2.4vw
    }

    .modal.is-overflow .modal__copyTxt sup {
        line-height: 2
    }

    .modal.is-overflow .modal__copyTxt span {
        top: .6666666666666666vw;
        right: -2.666666666666667vw;
        font-size: 1.733333333333333vw
    }

    .modal.is-overflow .modal__copyTxt span sup {
        font-size: 2vw;
        padding-right: .6666666666666666vw
    }

    .modal.is-overflow .modal__list {
        width: 67.06666666666666vw;
        margin: 5.333333333333333vw auto 0;
        font-size: 3.2vw
    }

    .modal.is-overflow .modal__listItem {
        padding: 0 0 0 4.533333333333333vw;
        margin: 1.333333333333333vw 0 0 -2.666666666666667vw
    }

    .modal.is-overflow .modal__listItem:before {
        top: .4vw;
        width: 3.2vw;
        height: 3.2vw
    }

    .modal.is-overflow .modal__btns {
        bottom: 8.666666666666666vw;
        width: 74.66666666666667vw
    }

    .modal.is-overflow .modal__btn {
        width: 26.666666666666668vw
    }

    .modal.is-overflow .modal__btnTxt {
        font-size: 4.266666666666667vw
    }

    .modal__content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        -webkit-transform: translate3d(0, 0, 0) scale(.9);
        -moz-transform: translate3d(0, 0, 0) scale(.9);
        -o-transform: translate3d(0, 0, 0) scale(.9);
        -ms-transform: translate3d(0, 0, 0) scale(.9);
        transform: translate3d(0, 0, 0) scale(.9);
        overflow-y: scroll
    }

    .modal.is-open .modal__content {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        -moz-transform: translate3d(0, 0, 0) scale(1);
        -o-transform: translate3d(0, 0, 0) scale(1);
        -ms-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1)
    }

    .modal__close {
        position: absolute;
        z-index: 1;
        top: 2.666666666666667vw;
        right: 2.666666666666667vw;
        background: 0 0;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 8vw;
        height: 8vw
    }

    .modal__copyTxt span,
    .modal__kira--2 {
        right: 1.333333333333333vw
    }

    .modal__flex {
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        width: 90.66666666666667vw;
        height: 168.26666666666665vw;
        aspect-ratio: .5388272583201268;
        margin: 3.333333333333333vw auto;
        padding: 7.333333333333333vw 0 0;
        display: block;
        border-radius: 500px 500px 50px 50px;
        background: var(--gradation-color)
    }

    .modal__phBox {
        position: static;
        width: 24.266666666666666vw;
        aspect-ratio: .4212962962962963;
        margin: 0 auto;
        -webkit-flex-shrink: 0;
        flex-shrink: 0
    }

    .modal__kira {
        position: absolute;
        top: 1.333333333333333vw;
        width: 12.8vw
    }

    .modal__kira--1 {
        left: 1.333333333333333vw
    }

    .modal__ph,
    .modal__phImg {
        right: 0;
        bottom: 0;
        width: 31.466666666666665vw;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 auto
    }

    .modal__ph {
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background: 0 0 !important
    }

    .modal__phImg {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        padding: 10.666666666666666vw 0 0
    }

    .modal__btn3D {
        position: absolute;
        bottom: auto;
        top: 53.333333333333336vw;
        right: -23.333333333333332vw;
        width: 13.466666666666667vw;
        aspect-ratio: 1
    }

    .modal__btn3DA,
    .modal__btn3DPh {
        width: 100%;
        height: 100%
    }

    .modal__btn3DA {
        position: relative;
        z-index: 1;
        display: inline-block
    }

    .modal__btn3DA:before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: -3px;
        bottom: -3px;
        background-color: #000;
        border-radius: 50px
    }

    .modal__txtBox {
        position: static;
        width: auto;
        margin: 0 auto;
        height: auto;
        text-align: center
    }

    .modal__name-en {
        margin: 8vw 0 0;
        font-size: 5.866666666666666vw;
        line-height: 1.204545454545455
    }

    .modal__name-jp {
        margin: .6666666666666666vw 0 0;
        font-size: 4vw;
        line-height: 1.533333333333333
    }

    .modal__note {
        margin: 2.666666666666667vw 0 0;
        font-size: 4vw;
        line-height: .5666666666666667
    }

    .modal__copy {
        margin: 0;
        font-size: 5.866666666666666vw;
        line-height: 1.272727272727273;
        height: 24vw;
        font-weight: 600;
        letter-spacing: .06em
    }

    .modal__copy--5 {
        font-size: 4.8vw
    }

    .modal__copyTxt span {
        top: .6666666666666666vw;
        font-size: 2vw
    }

    .modal__copyTxt span sup {
        line-height: 1.5;
        font-size: 2vw;
        padding-right: .26666666666666666vw
    }

    .modal__list {
        width: 70.13333333333333vw;
        margin: 0 auto;
        font-size: 3.466666666666667vw;
        font-weight: 400;
        letter-spacing: .09em;
        text-align: left
    }

    .modal__listItem {
        padding: 0 0 0 4.533333333333333vw;
        margin: 1.333333333333333vw 0 0 -2.666666666666667vw
    }

    .modal__listItem:before {
        top: .4vw;
        width: 3.2vw;
        height: 3.2vw
    }

    .modal__btns {
        position: absolute;
        left: 50%;
        bottom: 8.666666666666666vw;
        -webkit-transform: translate3d(-50%, 0, 0);
        -moz-transform: translate3d(-50%, 0, 0);
        -o-transform: translate3d(-50%, 0, 0);
        -ms-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        margin: 0;
        width: 74.66666666666667vw;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -o-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .modal__btns--noBtn {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -o-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center
    }

    .modal__btn {
        width: 35.2vw;
        aspect-ratio: 2.75
    }

    .modal__btnInner:before {
        top: 1.066666666666667vw;
        left: .9333333333333333vw;
        right: -1.466666666666667vw;
        bottom: -1.6vw
    }

    .modal__btnTxt {
        font-size: 5.733333333333333vw
    }

    .modal3d__viewer {
        width: 100%;
        height: 100svh;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .modal3d__viewerPhs--3 .modal3d__viewerPh {
        width: 56vw;
        height: 99.2vw
    }

    .modal3d__viewerPh {
        width: 72vw;
        height: 128vw
    }

    .modal3d__close {
        top: 2.666666666666667vw;
        right: 2.666666666666667vw;
        width: 8vw;
        height: 8vw
    }

    .modal3d__loadingItem {
        width: 6.666666666666667vw;
        height: 6.666666666666667vw;
        margin: 0 1.333333333333333vw
    }

    .modalConcept__close {
        top: 8vw;
        right: 8.4vw;
        width: 8vw;
        height: 8vw
    }

    .modalConcept__logo {
        width: 58.8vw;
        margin: 0 auto
    }

    .modalConcept__lead {
        margin-top: 6.666666666666667vw;
        padding: 0;
        font-size: 3.466666666666667vw;
        font-weight: 600;
        line-height: 2;
        text-align: center;
        color: #fff
    }

    .mv.fade-in .mv__bg {
        -webkit-transform: scale(5) translate3d(0, .8%, 0);
        -moz-transform: scale(5) translate3d(0, .8%, 0);
        -o-transform: scale(5) translate3d(0, .8%, 0);
        -ms-transform: scale(5) translate3d(0, .8%, 0);
        transform: scale(5) translate3d(0, .8%, 0);
        -webkit-transition: -webkit-transform 750ms cubic-bezier(.77, 0, .175, 1);
        -moz-transition: -moz-transform 750ms cubic-bezier(.77, 0, .175, 1);
        -o-transition: -o-transform 750ms cubic-bezier(.77, 0, .175, 1);
        -ms-transition: -ms-transform 750ms cubic-bezier(.77, 0, .175, 1);
        transition: transform 750ms cubic-bezier(.77, 0, .175, 1)
    }

    .mv__inner.is-hide {
        opacity: 0
    }

    .mv__inner.is-hide .mv__bg {
        -webkit-transform: scale(5) translate3d(0, .8%, 0) !important;
        -moz-transform: scale(5) translate3d(0, .8%, 0) !important;
        -o-transform: scale(5) translate3d(0, .8%, 0) !important;
        -ms-transform: scale(5) translate3d(0, .8%, 0) !important;
        transform: scale(5) translate3d(0, .8%, 0) !important
    }

    .mv__bg {
        -webkit-transform: translate3d(0, .8%, 0);
        -moz-transform: translate3d(0, .8%, 0);
        -o-transform: translate3d(0, .8%, 0);
        -ms-transform: translate3d(0, .8%, 0);
        transform: translate3d(0, .8%, 0)
    }

    .mv__bgPh {
        background-image: url("../assets/images/top/top_mask-sp.webp")
    }

    .mv__logo {
        position: absolute;
        top: 11.066666666666666vw;
        left: 50%;
        width: 19.2vw;
        -webkit-transform: translate3d(-50%, 0, 0);
        -moz-transform: translate3d(-50%, 0, 0);
        -o-transform: translate3d(-50%, 0, 0);
        -ms-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }

    .mv__products {
        width: 90vw
    }

    .mv__liquid {
        position: absolute;
        top: 40vw;
        left: -12vw;
        width: 122.66666666666667vw
    }

    .mv__liquidPh--2 {
        top: 14.666666666666666vw;
        left: -1.333333333333333vw;
        width: 14.933333333333334vw
    }

    .mv__bubble,
    .mv__stars {
        position: absolute;
        opacity: 0
    }

    .mv__bubble--1 {
        top: 17.333333333333332vw;
        left: 4vw;
        width: 4.8vw
    }

    .mv__bubble--2 {
        top: 0;
        left: 61.333333333333336vw;
        width: 3.333333333333333vw
    }

    .mv__bubble--3 {
        top: 6.666666666666667vw;
        right: -.6666666666666666vw;
        width: 2.8vw
    }

    .mv__bubble--4 {
        width: 18.666666666666668vw;
        top: 93.33333333333333vw;
        right: 37.333333333333336vw
    }

    .mv__bubble--5 {
        top: 24vw;
        right: -3.333333333333333vw;
        width: 2.533333333333333vw
    }

    .mv__rose--1 {
        bottom: 8.666666666666666vw;
        left: 2vw;
        width: 29.333333333333332vw
    }

    .mv__rose--2,
    .mv__rose--3 {
        width: 17.333333333333332vw
    }

    .mv__rose--2 {
        bottom: -1.333333333333333vw;
        left: 22.666666666666668vw
    }

    .mv__rose--3 {
        bottom: -2.666666666666667vw;
        right: 20vw
    }

    .mv__rose--4 {
        bottom: 5.333333333333333vw;
        right: 2vw;
        width: 29.333333333333332vw
    }

    .mv__cloud--1 {
        bottom: 0;
        left: 0;
        width: 64.4vw
    }

    .mv__cloud--2 {
        bottom: 0;
        right: 53.333333333333336vw;
        width: 48vw
    }

    .mv__cloud--3 {
        right: 0;
        bottom: 0;
        width: 63.06666666666666vw
    }

    .mv__stars--1 {
        top: 38.666666666666664vw;
        left: -4.666666666666667vw;
        width: 10vw;
        height: 14.666666666666666vw
    }

    .mv__stars--2 {
        top: 22.666666666666668vw;
        right: -2.666666666666667vw;
        width: 8.4vw;
        height: 11.066666666666666vw
    }

    .mv__hearts {
        top: 8vw;
        left: 36vw;
        width: 23.6vw;
        height: 21.866666666666667vw
    }

    .mv__star--1 {
        top: 0;
        right: 0;
        width: 9.333333333333334vw
    }

    .mv__star--2 {
        width: 5.733333333333333vw
    }

    .mv__star--3 {
        top: 0;
        left: 0;
        width: 6.4vw
    }

    .mv__heart,
    .mv__star--4 {
        left: 1.333333333333333vw
    }

    .mv__star--4 {
        bottom: 1.333333333333333vw;
        width: 9.066666666666666vw
    }

    .mv__star--5 {
        bottom: 0;
        right: 0;
        width: 9.333333333333334vw
    }

    .mv__heart {
        top: -1.333333333333333vw;
        width: 23.333333333333332vw
    }

    .op.fade-out .op__logo {
        -webkit-transform: translate3d(-50%, -49.2svh, 0) scale(.68);
        -moz-transform: translate3d(-50%, -49.2svh, 0) scale(.68);
        -o-transform: translate3d(-50%, -49.2svh, 0) scale(.68);
        -ms-transform: translate3d(-50%, -49.2svh, 0) scale(.68);
        transform: translate3d(-50%, -49.2svh, 0) scale(.68)
    }

    .op__cont {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100svh
    }

    .op__logo {
        width: 28.666666666666668vw;
        padding: 0
    }

    .product {
        position: relative;
        width: 100vw;
        height: 128vw;
        padding: 33.333333333333336vw 0 26.666666666666668vw
    }

    .product__series {
        position: absolute;
        z-index: 1;
        top: 26.666666666666668vw;
        right: 5.333333333333333vw;
        width: 22.666666666666668vw
    }

    .product__btn,
    .special__btn {
        bottom: 13.333333333333334vw
    }

    .product__card {
        top: 50%;
        width: 53.02933333333333vw;
        height: 92.06933333333333vw;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -moz-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -o-transform: translate3d(-50%, -50%, 0) scale(1.28);
        -ms-transform: translate3d(-50%, -50%, 0) scale(1.28);
        transform: translate3d(-50%, -50%, 0) scale(1.28)
    }

    .product__card.is-active {
        -webkit-animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout_sp;
        -moz-animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout_sp;
        -o-animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout_sp;
        -ms-animation: cardout_sp 1000ms cubic-bezier(.19, 1, .22, 1) forwards 750ms;
        animation: 1s cubic-bezier(.19, 1, .22, 1) 750ms forwards cardout_sp
    }

    .product__cardBack,
    .product__cardFront {
        border-radius: 2vw
    }

    .product__cardBackKira {
        width: 5.6vw
    }

    .product__cardBackKira--1 {
        top: 2vw;
        left: 2vw
    }

    .product__cardBackKira--2 {
        top: 2vw;
        right: 2vw
    }

    .product__cardBackKira--3 {
        bottom: 2vw;
        left: 2vw
    }

    .product__cardBackKira--4 {
        bottom: 2vw;
        right: 2vw
    }

    .product__cardBackLogo {
        width: 12.266666666666666vw
    }

    .product__canvasKira {
        width: 100vw;
        height: 40vw
    }

    .roll--reverse .roll__cont,
    .roll__cont {
        left: -26.666666666666668vw;
        width: 137.6vw;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0)
    }

    .roll {
        z-index: 2
    }

    .roll--reverse {
        z-index: 1
    }

    .roll--reverse .roll__cont {
        top: -11.333333333333334vw;
        transform: translate3d(0, 0, 0)
    }

    .roll--reverse .roll__contInner {
        -webkit-transform: scale(-1, -1) translate3d(0, 0, 0);
        -moz-transform: scale(-1, -1) translate3d(0, 0, 0);
        -o-transform: scale(-1, -1) translate3d(0, 0, 0);
        -ms-transform: scale(-1, -1) translate3d(0, 0, 0);
        transform: scale(-1, -1) translate3d(0, 0, 0)
    }

    .roll__cont {
        top: -16.666666666666668vw;
        transform: translate3d(0, 0, 0)
    }

    .roll__contInner {
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    .roll__txt {
        font-size: 6.133333333333333vw
    }

    .shop__box,
    .shop__box.is-opened,
    .shop__boxWrap.is-opened:before,
    .shop__boxWrap:before {
        border-radius: 9.333333333333334vw
    }

    .shop {
        padding: 13.333333333333334vw 0 0
    }

    .shop.inview--enter .shop__bomb--1 {
        -webkit-transform: scale(1) rotate(15deg);
        -moz-transform: scale(1) rotate(15deg);
        -o-transform: scale(1) rotate(15deg);
        -ms-transform: scale(1) rotate(15deg);
        transform: scale(1) rotate(15deg);
        -webkit-transition: -webkit-transform .6s cubic-bezier(.19, 1, .22, 1);
        -moz-transition: -moz-transform .6s cubic-bezier(.19, 1, .22, 1);
        -o-transition: -o-transform .6s cubic-bezier(.19, 1, .22, 1);
        -ms-transition: -ms-transform .6s cubic-bezier(.19, 1, .22, 1);
        transition: transform .6s cubic-bezier(.19, 1, .22, 1);
        -webkit-animation: 3s 1.8s infinite bomb2_sp;
        -moz-animation: 3s 1.8s infinite bomb2_sp;
        -o-animation: 3s 1.8s infinite bomb2_sp;
        -ms-animation: bomb2_sp 3000ms ease infinite 1800ms;
        animation: 3s 1.8s infinite bomb2_sp
    }

    .shop__cont {
        position: relative;
        z-index: 1;
        width: 86.13333333333333vw;
        height: auto;
        margin: 0 auto;
        padding: 40vw 0 53.333333333333336vw;
        display: block
    }

    .shop__boxWrap:nth-child(2) {
        display: inline-block;
        width: 100%
    }

    .shop__boxWrap:before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 1.066666666666667vw;
        left: 1.066666666666667vw;
        right: -1.066666666666667vw;
        bottom: -1.066666666666667vw;
        background-color: #000
    }

    .shop__box {
        position: relative;
        width: auto;
        height: 18vw;
        padding: 1.733333333333333vw 0 0
    }

    .shop__box--2 {
        margin: 5.333333333333333vw 0 0
    }

    .shop__box--2.is-opened {
        height: 133.33333333333334vw !important
    }

    .shop__box.is-opened {
        height: 72.66666666666667vw
    }

    .shop__boxInner {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .shop__boxInner:before {
        content: '';
        position: absolute;
        top: 6.8vw;
        right: 7.466666666666667vw;
        width: 2.933333333333333vw;
        height: 2px;
        background-color: #000
    }

    .shop__boxInner:after {
        top: 5.6vw;
        right: 8.666666666666666vw;
        width: 2px;
        height: 2.933333333333333vw
    }

    .shop__ttl {
        font-size: 8.133333333333333vw;
        line-height: 1.704918032786885
    }

    .shop__btns {
        margin: 4vw auto 0;
        width: auto;
        display: block
    }

    .shop__list {
        width: 65.33333333333333vw;
        margin: 1.333333333333333vw auto 0
    }

    .shop__item {
        -webkit-flex-shrink: 0;
        flex-shrink: 0
    }

    .shop__item:nth-child(odd) {
        width: 37.6vw
    }

    .shop__item:nth-child(2n) {
        width: clamp(16.25px, 16.25vw, 208px)
    }

    .shop__itemTxt {
        font-size: 2.266666666666667vw;
        line-height: 2.411764705882353
    }

    .shop__note {
        margin: 3.333333333333333vw 0 0;
        font-size: 1.733333333333333vw
    }

    .shop__deco--1 {
        z-index: 1;
        width: 50vw;
        left: -4.4vw;
        bottom: -17.333333333333332vw
    }

    .shop__deco--2 {
        display: block;
        width: 54.8vw;
        right: 26.666666666666668vw;
        bottom: -46.666666666666664vw
    }

    .shop__bomb {
        position: absolute
    }

    .shop__bomb--1 {
        z-index: 1;
        width: 80vw;
        top: 44vw;
        left: -6.666666666666667vw;
        -webkit-transform: scale(0) rotate(15deg);
        -moz-transform: scale(0) rotate(15deg);
        -o-transform: scale(0) rotate(15deg);
        -ms-transform: scale(0) rotate(15deg);
        transform: scale(0) rotate(15deg)
    }

    .shop__bomb--2 {
        width: 114.66666666666667vw;
        top: -6.666666666666667vw;
        right: -13.333333333333334vw
    }

    .shop .kira--1 {
        width: 7.066666666666666vw;
        top: 54.666666666666664vw;
        left: -4vw
    }

    .shop .kira--2 {
        width: 7.066666666666666vw;
        top: 16vw;
        right: 9.333333333333334vw
    }

    .shop .kira--3 {
        width: 11.466666666666667vw;
        bottom: 22.666666666666668vw;
        right: 12vw
    }

    .shop .circle--1 {
        width: 2.8vw;
        height: 2.8vw;
        top: 22.666666666666668vw;
        left: 6.666666666666667vw
    }

    .shop .circle--2 {
        width: 1.733333333333333vw;
        height: 1.733333333333333vw;
        top: 12vw;
        right: 4vw
    }

    .shop__hearts {
        top: -22.666666666666668vw;
        right: -4vw;
        width: 33.333333333333336vw;
        height: 29.333333333333332vw;
        opacity: 0
    }

    .shop__heart {
        width: 30.666666666666668vw;
        height: 28.266666666666666vw;
        left: 3.333333333333333vw
    }

    .shop__star--1 {
        top: 0;
        left: 0;
        width: 9.066666666666666vw
    }

    .shop__star--2 {
        left: 2.666666666666667vw;
        bottom: 2.666666666666667vw;
        width: 12vw
    }

    .shop__star--3 {
        right: 0;
        bottom: 0;
        width: 12.666666666666666vw
    }

    .special {
        min-height: 100vh;
        height: 56.25vw
    }

    .topics__cont {
        padding: 26.666666666666668vw 0 18.666666666666668vw
    }

    .topics__list {
        width: 92vw;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -o-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: start;
        -moz-box-align: start;
        -o-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        gap: 0;
        margin: 0 auto
    }

    .topics__itemBox {
        width: 44.53333333333333vw;
        margin: 0
    }

    .topics__itemBox:nth-child(2) {
        margin: 26vw 0 0
    }

    .topics__item {
        width: auto;
        margin: 0 0 2vw
    }

    .topics__btn {
        margin: 8.666666666666666vw 0 0
    }

    .topics__deco {
        -webkit-animation: 60s infinite random_sp;
        -moz-animation: 60s infinite random_sp;
        -o-animation: 60s infinite random_sp;
        -ms-animation: random_sp 60000ms ease infinite;
        animation: 60s infinite random_sp
    }

    .topics__deco--1 {
        left: 16vw;
        bottom: 53.333333333333336vw;
        width: 20.4vw;
        -webkit-animation: 60s infinite reverse random_sp;
        -moz-animation: 60s infinite reverse random_sp;
        -o-animation: 60s infinite reverse random_sp;
        -ms-animation: random_sp 60000ms ease infinite reverse;
        animation: 60s infinite reverse random_sp
    }

    .topics__deco--1 .topics__decoItem--kira {
        width: 10vw;
        top: -4vw;
        left: 1.333333333333333vw
    }

    .topics__deco--1 .topics__decoItem--bubble {
        width: 7.066666666666666vw
    }

    .topics__deco--2 {
        top: 28vw;
        right: 13.333333333333334vw;
        width: 22.666666666666668vw
    }

    .topics__deco--2 .topics__decoItem--kira {
        width: 20vw;
        top: -8vw;
        left: -8vw
    }

    .topics__deco--2 .topics__decoItem--bubble {
        width: 10.666666666666666vw
    }
}


#banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    scroll-margin-top: 1000px;
}


.concept {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 330lvh;
    overflow: clip;
}

.l-banner {
    background: none;
}

.banner__layer111 .img-bg {
    width: 100%;
    height: 100%;
    display: block;
}

.l-banner__layer111 {
    height: 100%;
    width: 100%;
}







.topic-content .l-topic-item {
    position: relative;
    will-change: transform;
    transform-origin: center bottom;
}

/* Lắc nhẹ mặc định */
.topic-content:not(.is-grouped) .l-topic-item {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Mỗi card một keyframe / duration khác nhau cho cảm giác “random” */
.topic-content:not(.is-grouped) .l-topic-item:nth-child(1) {
    animation-name: cardFloat1;
    animation-duration: 3s;
}

.topic-content:not(.is-grouped) .l-topic-item:nth-child(2) {
    animation-name: cardFloat2;
    animation-duration: 3.2s;
    animation-delay: -1s;
}

.topic-content:not(.is-grouped) .l-topic-item:nth-child(3) {
    animation-name: cardFloat3;
    animation-duration: 2.8s;
    animation-delay: -.5s;
}

.topic-content:not(.is-grouped) .l-topic-item:nth-child(4) {
    animation-name: cardFloat4;
    animation-duration: 3.2s;
    animation-delay: -1.3s;
}

/* Keyframes – lắc rất nhẹ, kết hợp translateY + rotate */
@keyframes cardFloat1 {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-4px) rotate(-0.6deg);
    }

    100% {
        transform: translateY(3px) rotate(0.4deg);
    }
}

@keyframes cardFloat2 {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    40% {
        transform: translateY(-5px) rotate(0.8deg);
    }

    100% {
        transform: translateY(2px) rotate(-0.5deg);
    }
}

@keyframes cardFloat3 {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    30% {
        transform: translateY(-3px) rotate(-0.7deg);
    }

    100% {
        transform: translateY(4px) rotate(0.5deg);
    }
}

@keyframes cardFloat4 {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    60% {
        transform: translateY(-6px) rotate(0.9deg);
    }

    100% {
        transform: translateY(2px) rotate(-0.4deg);
    }
}

/* Khi các card “ghép thành nhóm” → dừng chuyển động */
.topic-content.is-grouped .l-topic-item {
    animation-play-state: paused;
    transform: none;
    /* trả về vị trí/rotation ban đầu */
}



.l-move-desc img {
    -webkit-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    -moz-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    -o-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    -ms-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
}

.l-prod-desc img {
    -webkit-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    -moz-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    -o-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    -ms-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
}

.l-product__title.l-img img {

    -webkit-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    -moz-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    -o-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    -ms-animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
    animation: rose_reverse 2900ms infinite cubic-bezier(.455, .03, .515, .955) reverse;
}

.l-move-title img {
    -webkit-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    -moz-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    -o-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    -ms-animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
    animation: rose 2900ms infinite cubic-bezier(.455, .03, .515, .955);
}

/* chuyển động nhỏ hơn, chủ yếu lên/xuống + xoay Z nhẹ */
@keyframes carSwayText {
    0% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(-4px) rotateZ(-1deg);
    }

    100% {
        transform: translateY(3px) rotateZ(1deg);
    }
}

/* keyframes car-sway: lên/xuống + trái/phải + xoay nhẹ 3D */
@keyframes carSway {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    25% {
        transform: translate3d(-6px, -4px, 8px) rotateX(3deg) rotateY(-4deg) rotateZ(-1deg);
    }

    50% {
        transform: translate3d(4px, 3px, -6px) rotateX(-3deg) rotateY(3deg) rotateZ(1deg);
    }

    75% {
        transform: translate3d(-3px, 5px, 4px) rotateX(2deg) rotateY(-2deg) rotateZ(0deg);
    }

    100% {
        transform: translate3d(2px, -3px, 0) rotateX(-2deg) rotateY(2deg) rotateZ(-1deg);
    }
}

@media screen and (max-width:576px) {
.l-banner__layer111 {
    height: 100%;
    width: 100%;
    transform: none !important;
    opacity: 1 !important;
    filter: inherit !important;
}
#banner {
    position: unset !important;
}
.concept{
    height: auto;
}
.concept__cont:before{
    display: none;
}
.concept__innerWrap, .mv__productsWrap{
    height: 100%;
}
}

/* ================================================
   Loading Screen Styles
   ================================================ */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #C59791;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #383838;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 0;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* スマホ対応 */
@media (max-width: 576px) {
    .loading-spinner {
        width: 50px;
        height: 50px;
        border-width: 3px;
    }

    .loading-text {
        font-size: 12px;
    }
}