.info-box {
    width: 100% !important;
    box-sizing: border-box;
}



.info-area {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: absolute;
    bottom: 0;
    width: 100vw;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
    z-index: 10000;
}

.info-box {
    color: #fff;
    margin: .1rem 0 0 0;
    width: 93vw;
    overflow: hidden;
    font-size: .7rem;
    padding-top: .5rem
}

.item-name {
    margin: .2rem 0 .3rem .8rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    width: 93vw
}

.item-name,
.item-price {
    font-size: .8rem;
    text-align: left;
    float: left
}

.item-price {
    margin: .35rem 0 .13rem .2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    width: 43vw
}

.item-text-box {
    clear: both;
    display: block
}

.item-text {
    font-size: .8rem;
    margin: .3rem 0 0 1rem;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.item-text {
    animation: none !important;
}

.item-text.scroll-animate {
    animation: scrollSample01 20s linear infinite !important;
}

@-webkit-keyframes scrollSample01 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes scrollSample01 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.swiper-slide-active .item-text {
    -webkit-animation: scrollSample01 15s linear infinite;
    animation: scrollSample01 15s linear infinite
}

.cta-box-a {
    text-align: center;
    font-size: .9rem;
    background-color: #ff6069;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    /* padding: .05rem 1rem; */
    border-radius: .3rem;
    /* margin: 0 .4rem .7rem 0; */
    z-index: 10;
    width: 168.75px;
    /* width: 41vw; */
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    font-weight: 500
}

.cta-box-b {
    float: none;
    margin: 0 auto;
    width: 80%;
}


@media (min-aspect-ratio: 2/3) {
    .info-area {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        position: absolute;
        bottom: 0;
        width: 100vw;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
        z-index: 10000;
    }

    .info-box {
        color: #fff;
        /* margin: .1rem 0 .5rem .8rem; */
        width: 93vw;
        overflow: hidden;
        font-size: .7rem;
        padding-top: .5rem
    }

    .item-name{
        text-align: left;
        float: left
    }

    .item-name {
        margin: .2rem 0 0 .2rem;
        font-size: .8rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        width: 93vw
    }

    .item-price {
        text-align: left;
        margin: .35rem 0 .13rem .2rem;
        font-size: .8rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        float: left;
        width: 40vw
    }

    .item-text-box {
        clear: both;
        display: block
    }

    .item-text {
        font-size: .7rem;
        margin: 1.1rem 0 0 1rem;
        white-space: nowrap;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .cta-box-a {
        text-align: center;
        font-size: .75rem;
        background-color: #ff6069;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        padding: .05rem .5rem;
        border-radius: .3rem;
        margin: 0 1rem .5rem 0;
        z-index: 10;
        width: 40vw;
        height: 1.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        float: right
    }
}

@media screen and (min-width: 700px) { 
    .info-area {
        width: 56vh
    }

    .info-box {
        width: 54vh
    }

    .item-name {
        width: 54vh;
        margin-left: 1vh
    }

    .item-price {
        width: 24vh;
        margin-left: 1vh
    }

    .cta-box-a {
        width: 20vh
    }
}



.cta-image {
    width: 90% !important;
    margin: 0 auto;
}

.item-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    margin:.2rem 0 0 .5rem;
}

.item-price {
    float: none !important;
    margin: 0;
    word-break: break-all;
    flex-shrink: 1;
}

/* .cta-box-a {
    float: none !important;
    margin-left: auto;
} */



/* キャプション */
.caption {
    color: #000;
    /* text-shadow: 2px 2px 5px #eee, -2px -2px 5px #eee; */
    font-size: 40px;
    font-weight: bold;
    text-align: right;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 5;
    opacity: 0;
}

/* フェード＋ゆっくり移動 処理が重いときは外す*/
.swiper-slide-active .fadeUp-vertical {
    animation-name: fadeUpAnime-vertical;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.swiper-slide-active .fadeUp-horizontal {
    animation-name: fadeUpAnime-horizontal;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.fadeUp-vertical img {
    width: 100%;
}

.fadeUp-horizontal img {
    width: 100%;
}
.swiper-slide-active .caption {
    animation-name: captionFadeIn;
    animation-duration: 3.0s;
    animation-fill-mode: forwards;
}

@keyframes captionFadeIn {
    from {
        opacity: 0;
        /* transform: translateX(-50%) translateY(-50%) scale(1); */
    }

    to {
        opacity: 1;
        /* transform: translateX(-50%) translateY(-50%) scale(1); */
    }
}

@keyframes fadeUpAnime-vertical {
    from {
        opacity: 0;
        transform: translateY(100px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fadeUpAnime-horizontal {
    from {
        opacity: 0;
        transform: translateX(100px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.caption div:nth-of-type(1) {
    animation-delay: 0s;
}

.caption div:nth-of-type(2) {
    /* color: #700; */
    animation-delay: 0.4s;
    /* font-size: 0.8em; */
}

.caption div:nth-of-type(3) {
    /* color: #333; */
    animation-delay: 0.8s;
    /* font-size: 0.6em; */
}
.bg-1 {
    text-align: left;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 1rem;
    border-radius: 1rem;
}
.ql-editor img{
    width: 100% !important;
}