:root {
    --sectionWidth: calc(100% - 40px);
}
body {
    background: linear-gradient(to right, #ffdd8d, #c3f19f, #aaf9eb, #fed3f1);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.714;
}
a:hover {
    opacity: .8;
}
img {
    display: block;
}
main {
    margin: 0 auto;
    /* max-width: 1000px; */
}

.bg-white .content {
    padding: 49px 50px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 17px;
}
.flex .text {
    text-align: left;
}
.kv {
    position: relative;
}
.kvDate {
    position: absolute;
    top: 2vw;
    left: 1vw;
    width: 34.5vw;
    max-width: 344px;
}
.kvBubble {
    position: absolute;
    top: 9.5vw;
    right: 1vw;
    width: 23vw;
    max-width: 231px;
}
.kvText {
    position: absolute;
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    width: 93vw;
}
.mainText {
    background-image: url(../img/bazurecipe-collabo/bg.png);
    color: #fff;
    padding: 38px 50px;
}
.mainText .flex {
    justify-content: start;
}
.mainText .heading img {
    margin: 0 auto;
    margin-bottom: 36px;
}
.mainText .subHeading {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    margin-bottom: 36px;
}
.mainText .text {
}
.mainText .text + .text {
    margin-top: 23px;
}
.bg-white {
    background-color: #fff;
    color: #2f0000;
    text-align: center;
    max-width: 1000px;
    width: var(--sectionWidth);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* padding: 0 50px; */
}

/* howto */
.howto .content {
    padding-bottom: 78px;
}
.howto .content .step {
    position: relative;
    z-index: 1;
}
.howto .content .step a {
    display: inline-block;
}
.howto .content .step::before {
    content: '';
    display: block;
    height: 100%;
    background-image: url(../img/bazurecipe-collabo/bg_polka-dots.png);
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}
.howto .content .step:nth-of-type(1)::before {
    max-width: 274px;
    max-height: 274px;
    width: 274px;
    top: 0%;
    left: 6%;
}
.howto .content .step:nth-of-type(1)::after {
    content: '';
    display: block;
    height: 100%;
    background-image: url(../img/bazurecipe-collabo/bg_polka-dots.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: -1;
    max-width: 204px;
    max-height: 204px;
    width: 204px;
    bottom: 10%;
    right: 2%;
}
.howto .content .step:nth-of-type(2)::before {
    max-width: 232px;
    max-height: 232px;
    width: 232px;
    background-size: contain;
    top: 0%;
    left: 1%;
}
.howto .content .step:nth-of-type(3)::before {
    max-width: 155px;
    max-height: 155px;
    width: 155px;
    background-size: contain;
    top: -9%;
    right: 5%;
}
.howto .content .step + .step {
    margin-top: 80px;
}
.howto .content .text {
    margin-bottom: 48px;
}
.howto .content .banner {
    margin-bottom: 10px;
}
.howto img {
    margin: 0 auto;
}
.howto .stepLabel {
    margin-bottom: 22px;
}
.howto .ss01 {
    padding-left: 11%;
}
.howto .flex {
    margin-bottom: 16px;
}
.howto .flex .text {
    margin-bottom: 0;
}
.howto .caution {
    font-size: 12px;
    color: #a24f4f;
}
.howto .caution + .caution {
    margin-top: 6px;
}

/* about */
.about .content {
    position: relative;
    z-index: 1;
    padding-bottom: 70px;
}
.about .content::before {
    content: '';
    display: block;
    height: 100%;
    background-image: url(../img/bazurecipe-collabo/bg_polka-dots_orange.png);
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
    max-width: 225px;
    max-height: 225px;
    width: 225px;
    bottom: 5%;
    right: 12%;
}
.about .content a {
    display: inline-block;
    padding-right: 3%;
}
.about img {
    margin: 0 auto;
}
/* .about img.ss02 {
    padding-right: 30px;
} */
.about .text {
    margin-top: 5px;
}

/* cook */
.cook .content {
    padding-bottom: 90px;
}
.cook .container {
    display: flex;
    justify-content: left;
}
.cook .container>div {
    display: inline-block;
}

.cook .flex {
    gap: 58px;
}

.cook .flex .text {
    margin-bottom: 20px;
}
.cook .flex .watchButton {
    /* margin: 0 auto; */
    margin-bottom: 15px;
}
.cook .caution  {
    font-size: 12px;
    color: #a24f4f;
}
.cook .flex .left {
    position: relative;
}
.cook .flex .left img {
    position: relative;
    z-index: 2;
}
.cook .flex .left::after {
    content: "";
    display: block;
    max-width: 225px;
    max-height: 225px;
    width: 225px;
    height: 100%;
    background-image: url(../img/bazurecipe-collabo/bg_polka-dots_brown.png);
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20%;
    left: -70%;
    z-index: 1;
}

/* video */

.video .content {
    padding: 38px 0 121px;
    position: relative;
    z-index: 1;
}
.video .content a {
    display: inline-block;
    margin: 0 auto;
}
.video .content::before,
.video .content::after {
    content: '';
    display: block;
    height: 100%;
    background-image: url(../img/bazurecipe-collabo/bg_polka-dots_green.png);
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
    
}
.video .content::before {
    max-width: 225px;
    max-height: 225px;
    width: 225px;
    top: 20%;
    right: 5%;
}
.video .content::after{
    max-width: 156px;
    max-height: 156px;
    width: 156px;
    background-size: contain;
    bottom: 4%;
    left: 13%;
}

.video img {
    margin: 0 auto;
}

.video .content .text {
    margin-bottom: 41px;
}

.video .content .movieThumbnail {
    margin-bottom: 59px;
}

@media screen and (max-width:768px) {
    .mainText .flex {
        justify-content: center;
    }
    .howto .ss01 {
        padding-left: 8%;
    }
    .bg-white .content {
        padding: 49px 25px;
    }
    .mainText {
        padding: 38px 25px;
    }
    .mainText .subHeading {
        line-height: 1.5;
    }
    .cook .container {
        justify-content: center;
    }
}


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

    25% {
        transform: translate(25px, -25px);
    }

    50% {
        transform: translate(-25px, 25px);
    }

    75% {
        transform: translate(-15px, -25px);
    }

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

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

    25% {
        transform: translate(-25px, 25px);
    }

15% {
        transform: translate(25px, -15px);
    }

    75% {
        transform: translate(15px, 25px);
    }

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

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

    25% {
        transform: translate(19px, -31px);
    }

    50% {
        transform: translate(-19px, 19px);
    }

    75% {
        transform: translate(19px, -19px);
    }

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

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

    25% {
        transform: translate(-31px, -50px);
    }

    50% {
        transform: translate(25px, 31px);
    }

    75% {
        transform: translate(-25px, 19px);
    }

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

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

    25% {
        transform: translate(31px, -19px);
    }

    50% {
        transform: translate(-19px, 31px);
    }

    75% {
        transform: translate(25px, -25px);
    }

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

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

    25% {
        transform: translate(-19px, 31px);
    }

    50% {
        transform: translate(19px, -19px);
    }

    75% {
        transform: translate(-31px, 19px);
    }

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

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

    25% {
        transform: translate(37px, 15px);
    }

    50% {
        transform: translate(-25px, -31px);
    }

    75% {
        transform: translate(19px, 25px);
    }

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

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

    25% {
        transform: translate(-25px, -25px);
    }

    50% {
        transform: translate(31px, 19px);
    }

    75% {
        transform: translate(-19px, -19px);
    }

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

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

    25% {
        transform: translate(19px, -31px);
    }

    50% {
        transform: translate(-31px, 15px);
    }

    75% {
        transform: translate(25px, -19px);
    }

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

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

    25% {
        transform: translate(-37px, 19px);
    }

    50% {
        transform: translate(25px, -31px);
    }

    75% {
        transform: translate(-19px, 25px);
    }

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

.circle-content-fixed {
    position: fixed;
    top: 160px;
    left: 20px;
    width: 100%;
}

.circle-content img {
    position: fixed;
    z-index: -1;
}

.circle--01 {
    animation: sway 30s ease-in-out infinite;
    top: 0%;
    left: -5%;
}

.circle--02 {
    animation: sway2 30s ease-in-out infinite;
    top: 20%;
    left: 5%;
}

.circle--03 {
    animation: sway3 30s ease-in-out infinite;
    top: 40%;
    left: -5%;
}

.circle--04 {
    animation: sway4 30s ease-in-out infinite;
    top: 88%;
    left: 5%;
}

.circle--05 {
    animation: sway5 30s ease-in-out infinite;
    top: 80%;
    left: -5%;
}

.circle--06 {
    animation: sway6 30s ease-in-out infinite;
    top: 100%;
    left: 5%;
}

.circle--07 {
    animation: sway7 30s ease-in-out infinite;
    top: 0%;
    right: -5%;
}

.circle--08 {
    animation: sway8 30s ease-in-out infinite;
    top: 20%;
    right: 5%;
}

.circle--09 {
    animation: sway9 30s ease-in-out infinite;
    top: 40%;
    right: -5%;
}

.circle--10 {
    animation: sway10 30s ease-in-out infinite;
    top: 85%;
    right: 5%;
}

.circle--11 {
    animation: sway1 30s ease-in-out infinite;
    top: 80%;
    right: -5%;
}

.circle--12 {
    animation: sway2 30s ease-in-out infinite;
    top: 100%;
    right: 6%;
}
.circle--13 {
    animation: sway2 30s ease-in-out infinite;
    top: 0%;
    left: 10%;
}
.circle--14 {
    animation: sway2 30s ease-in-out infinite;
    top: 25%;
    left: 20%;
}
.circle--15 {
    animation: sway2 30s ease-in-out infinite;
    top: 50%;
    left: 10%;
}
.circle--16 {
    animation: sway2 30s ease-in-out infinite;
    top: 75%;
    left: 20%;
}
.circle--17 {
    animation: sway2 30s ease-in-out infinite;
    top: 100%;
    left: 10%;
}
.circle--18 {
    animation: sway2 30s ease-in-out infinite;
    top: 0%;
    right: 10%;
}
.circle--19 {
    animation: sway2 30s ease-in-out infinite;
    top: 25%;
    right: 20%;
}
.circle--20 {
    animation: sway2 30s ease-in-out infinite;
    top: 50%;
    right: 10%;
}
.circle--21 {
    animation: sway2 30s ease-in-out infinite;
    top: 75%;
    right: 20%;
}
.circle--22 {
    animation: sway2 30s ease-in-out infinite;
    top: 100%;
    right: 10%;
}

.content .text.mb24 {
    margin-bottom: 24px;
}
.content .text.coordinate {
    margin-bottom: 0;
    margin-top: 15px;
}