@charset "UTF-8";


/*--------------- 保育方針 ---------------*/

#policy .flex {
    align-items: center;

    gap: 2em;
}

#policy .flex-wrap.wrap1 {
    position: relative;
    aspect-ratio: 10 / 9;
    height: auto;
}
#policy .flex-img {
    position: relative;
    width: 100%;
    height: auto;
}
#policy .flex-img.img1 {
    aspect-ratio: 5 / 4;
    width: 75%;
    margin-left: auto;
    opacity: 0;
    transition: .5s ease;
}
#policy .active .flex-img.img1 {
    opacity: 1;
}

#policy .flex-img.img2 {
    position: absolute;
    bottom: 0;
    left: 0;
    aspect-ratio: 10 / 7;
    width: 60%;
    transition: .5s .2s ease;

}

.flex-img img {
    width: 100%;
    height: 100%;
    border-radius: 3vw;
    object-fit: cover;
}

#policy .flex-wrap.wrap2 {
    position: relative;
    z-index: 2;
    transform: translateY(1em);
    max-width: 30em;
    margin: 0 auto;
    padding: 2em;
    opacity: 0;
    transition: .5s .4s ease;
}
#policy .flex-wrap.wrap2.active {
    opacity: 1;
    transform: translateY(0);
}

/* 装飾 */

.p_deco {
    position: absolute;
    z-index: 2;
    height: auto;
}

.p_item1 {
    top: 0%;
    left: 0%;
    transform: translate(60%, -100%);
    display: flex;
    gap: 1em;
    aspect-ratio: 10 / 4.7;
    width: 5em;
}

.p_item2 {
    top: 0%;
    left: 0%;
    transform: translate(200%, -110%);
    aspect-ratio: 1 / 2;
    width: 2em;
}

.p_item3 {
    bottom: 0;
    right: 0;
    transform: translate(200%, -100%);
    width: 5em;
    text-align: center;
}

.p_item3 img {
    width: calc(100% / 2 - 1em);
    height: auto;
    object-fit: contain;
    animation: about-deco 10s ease-in-out infinite;
}
.p_item3 img.img_2 {
  animation-delay: .3s;
}
.p_item3 img.img_3 {
  animation-delay: .6s;
}

.int_flex {
    position: absolute;
    top: 70%;
    transform: translate(0, -30%);
    display: flex;
    gap: 2.5em;
    height: auto;
}

.p_wrap {
    position: relative;
}

.p_deco_inner {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    margin-left: calc(50% - 50vw);
}

.p_item4 {
    bottom: 0;
    right: 0;
    aspect-ratio: 1 / 1;
    transform: translate(0%, 10%);
    width: max(25vw, 200px);
}

/*--------------- 保育理念 ---------------*/

#philosophy .flex {
    position: relative;
    text-align: center;
    gap: 2em;
}

#philosophy .flex-wrap {
    width: calc(100% / 3 - 1em);
}

#philosophy .flex-img {
    aspect-ratio: 10 / 8.8;
    width: 100%;
    height: auto ;
}

#philosophy .flex-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#philosophy p {
    text-align: center;
    font-weight: 700;
}

#philosophy p span {
    display: inline-block;
}

#philosophy p.text_1 {
    font-size: 1.6em;
}

p.text_1 span {
    display: inline-block;
}

/* 装飾 */

.p_item5 {
    top: 0;
    left: 0;
    transform: translate(35%, -140%);
    aspect-ratio: 1 / .7;
    width: 8em;
}

.p_item6 {
    top: 0;
    right: 0;
    transform: translate(-60%, -110%);
    aspect-ratio: 2 / 1;
    width: 9em;
}

.p_item7 {
    top: 0;
    right: 0;
    transform: translate(50%, -150%);
    aspect-ratio: 2 / 1;
    width: 13em;
}

.p_item8 {
    top: 0;
    left: 0;
    transform: translate(-30%, 90%);
    aspect-ratio: 2 / 1;
    width: 9em;
}

.p_item9 {
    top: 0;
    left: 0;
    transform: translate(40%, -15%);
    aspect-ratio: 2 / 1;
    width: 11em;
}


/*--------------- おちかい ---------------*/


#pledge p {
    font-size: 1.6em;
    font-weight: 700;
}

#pledge .top_p {
    padding-bottom: 3em;
    text-align: center;
}

.pledge-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.pledge-text p {
    position: relative;
    z-index: 1;
    transform: translateY(.5em);
    display: inline-block;
    width: 16em;
    padding: .25em 0;
    text-align: center;
    font-size: 1.6em;
    background-color: #F7D061;
    border-radius: 50vw;
    opacity: 0;
}
.pledge-text.active p {
    opacity: 1;
    transform: translateY(0);
}

.pledge-text p:nth-child(1) {
    transition: .5s ease;
}
.pledge-text p:nth-child(2) {
    transition: .5s .2s ease;
}
.pledge-text p:nth-child(3) {
    transition: .5s .4s ease;
}
.pledge-text p:nth-child(4) {
    transition: .5s .6s ease;
}
.pledge-text p:nth-child(5) {
    transition: .5s .8s ease;
}

.pledge-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    margin-left: calc(50% - 50vw);
}
.pledge-img .inner {
    position: relative;
    width: 100%;
    max-width: 1480px;
    height: 100%;
    margin: 0 auto;
}

.pledge-img img {
    position: absolute;
    height: auto;
    border-radius: 3vw;
    object-fit: cover;
}

.pledge-text img:nth-child(1) {
    left: 0;
    top: 0;
    transform: translateY(15%);
    aspect-ratio: 5 / 3;
    width: 25%;
    border-radius: 2vw;
}

.pledge-text img:nth-child(2) {
    right: 0;
    bottom: 0;
    transform: translateY(10%);
    aspect-ratio: 4 / 5;
    width: 25%;
}

/*---------- 食のこだわり ----------*/

#food.section {
    margin-top: 20vw;
    padding: 0 0 15vw 0;
}

#food .section.bg_1::before {
    content: none;
}

#food .section-inner {
    width: 90%;
    max-width: 1480px;
}

#food .title {
    margin-bottom: min(170px,15vw);
}

.food-title {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 3em;
    font-size: min(3.5vw,50px);
}

.food-title-right1 {
    transform: translateX(20%);
}
.food-title-right2 {
    transform: translateX(100%);
}

.food-title h2 {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 1em;
}

.food-title::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%) scaleX(-1);
  aspect-ratio: 10 / 3;
  width: 12em;
  height: auto;
  background: url(../images/cnt-bg_w.webp) no-repeat center / contain;
}
.food-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60% ,-38%);
  aspect-ratio: 2 / 1;
  width: 8em;
  height: auto;
  background: url(../images/cnt-bg_2c.webp) no-repeat center / contain;
}

#food .flex {
    gap: 2em;
    align-items: center;
    margin-bottom: 15em;
}
#food .flex:last-child {
    margin-bottom: 0;
}

#food .flex-wrap.bg_w {
    position: relative;
}
#food .flex-wrap.flex-img {
    position: relative;
    z-index: 1;
}

#food .flex-wrap.bg_w::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 5 / 3;
    width: auto;
    height: 65vw;
    max-height: 45em;
    background: url(../images/bg-w.webp) no-repeat center / contain;
}

#food .flex-wrap p {
    position: relative;
    z-index: 1;
    transform: translateY(1em);
    padding-right: 2rem;
    text-align: justify;
    opacity: 0;
    transition: .5s .5s ease;
}
#food .flex-wrap.active p {
    transform: translateY(0);
    opacity: 1;
}

#food .flex2 .flex-wrap p ,
#food .flex4 .flex-wrap p {
    padding-right: 0;
    padding-left: 2rem;
}

#food .flex-wrap p.text_1 {
    transform: translateY(1em);
    margin-bottom: .5em;
    text-align: left;
    line-height: 1.4;
    font-size: 1.6em;
    font-weight: 700;
    color: #723615;
    opacity: 0;
    transition: .5s ease;
}
#food .flex-wrap.active p.text_1 {
    transform: translateY(0);
    text-align: left;
    opacity: 1;
}

.food-img img {
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    object-fit: cover;
}
 
.flex1 .food-img img {
    transform: rotate(-10deg);
    aspect-ratio: 10 / 7;
    width: 92%;
    height: auto;

}

#food .flex.flex2 .wrap2 {
    position: relative;
    aspect-ratio: 5 / 6;
}

#food .flex.flex2 .food-img {
    position: absolute;
    aspect-ratio: 5 / 4;
    width: 60%;
    height: auto;
}

#food .flex.flex2 .food-img:nth-child(1) {
    top: 0;
    right: 0;
}
#food .flex.flex2 .food-img:nth-child(2) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#food .flex.flex2 .food-img:nth-child(3) {
    bottom: 0;
    right: 0;
}

#food .flex.flex2 .food-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#food .flex:nth-child(odd) .flex-wrap {
    text-align: right;
}

.text-box {
    text-align: left;
}

.text-box .btn {
    margin-top: 2.5em;
}

.flex.flex3 .flex-img {
    position: relative;
    aspect-ratio: 4 / 5;
}

.flex.flex3 .food-title,
.flex.flex5 .food-title {
    position: absolute;
}

.flex.flex3 .food-img.food-img_1 {
    transform: translateY(15%);
    aspect-ratio: 4 / 5;
    width: 60%;
    margin-left: auto;
}

.flex.flex3 .food-img.food-img_2 {
    position: absolute;
    bottom: 0;
    left: 0;
    aspect-ratio: 10 / 7 ;
    width: 70%;
}

.flex4 .flex-img {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.img-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5em;
}

.img-flex img {
    width: calc(100% / 3 - .4em);
    border-radius: initial;
}

.flex.flex5 .flex-img {
    position: relative;
    aspect-ratio: 1 / 1.3;
    max-height: 720px;
}


.flex.flex5 .food-img.food-img_1 {
    transform: translateY(20%);
    aspect-ratio: 1 / 1;
    width: 65%;
    max-width: 350px;
    margin-left: auto;
}

.flex.flex5 .food-img.food-img_2 {
    position: absolute;
    bottom: 0;
    left: 0;
    aspect-ratio: 5 / 4;
    width: 70%;
}

/* 装飾 */

.food_leaf {
    position: absolute;
    z-index: -1;
    right: 0%;
    bottom: 99.5%;
    width: 100vw;
    height: 30vw;
    background: url(../images/bg.webp) repeat-x center bottom / contain;
}

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

.food_leaf1 {
    position: absolute;
    z-index: -1;
    bottom: 48%;
    left: 10%;
    transform: translate(0%, 0%);
    width: 6em;
    height: auto;
}

.food_leaf2 {
    position: absolute;
    z-index: -1;
    bottom: 50%;
    left: 10%;
    transform: translate(125%,0%);
    width: 5em;
    height: auto;
}

.food_flower1 {
    z-index: -2;
    bottom: 40%;
    right: 10%;
    transform: translate(0%, 0%);
    width: 2em;
    height: auto;
}

.food_flower2 {
    position: absolute;
    z-index: -1;
    bottom: 38%;
    right: 10%;
    transform: translate(-110%,0%);
    width: 4em;
    height: auto;
}

.p_item10 {
    top: 35%;
    left: 0;
    transform: translateX(-25%) rotate(-35deg);
    width: 15em;
}

.flex1 .food-img .p_deco img {
    aspect-ratio: initial;
    border-radius: initial;
    transform: rotate(-0);
    width: 80%;
}

.p_item11 {
    bottom: 0;
    left: 0;
    width: 5em;
    transform: translate(0, 20%) scaleX(-1) rotate(-10deg);
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item11 {
    opacity: 1;
    transform: translate(-60%, 70%) scaleX(-1) rotate(10deg);
}

.p_item12 {
    bottom: 0;
    right: 0;
    transform: translate(-30%, 120%);
    width: 7em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item12 {
    opacity: 1;
    transform: translate(-30%, 100%);
}

.p_item13 {
    top: 0;
    right: 0;
    transform: translate(-50%, 0%) rotate(20deg);
    width: 6em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item13 {
    opacity: 1;
    transform: translate(-30%, -130%);
}

.p_item14 {
    bottom: 0;
    left: 0;
    transform: translate(50%, 50%) rotate(50deg);
    width: 5em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item14 {
    opacity: 1;
    transform: translate(0%, 130%) rotate(34deg);
}

.p_item15 {
    top: 0;
    left: 0;
    transform: translate(0%, 100%) rotate(6deg);
    width: 9em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item15 {
    transform: translate(-30%, 25%) rotate(-6deg);
    opacity: 1;
}

.flex-img .p_deco img {
    border-radius: initial;
}

.p_item16 {
    bottom: 0;
    left: 0;
    transform: translate(-30%, 0) rotate(0);
    width: 8em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item16 {
    opacity: 1;
    transform: translate(0%, -20%) rotate(-8deg);
}

.p_item17 {
    bottom: 0;
    left: 0;
    transform: translate(-30%, 0) rotate(0);
    width: 8em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item17 {
    opacity: 1;
    transform: translate(-60%, 30%) rotate(15deg);
}

.p_item18 {
    top: 18%;
    left: 0;
    transform: translate(50%, 20%);
    width: 6em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item18 {
    transform: translate(50%, 0%);
    opacity: 1;
}

.p_item19 {
    top: 54%;
    right: 0;
    transform: translate(15%, 20%) rotate(0);
    width: 10em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item19 {
    transform: translate(15%, -20%) rotate(7deg);
    opacity: 1;
}

.p_item20 {
    bottom: 50%;
    left: 0;
    transform: translate(100%, 60%) rotate(5deg);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item20 {
    transform: translate(50%, 30%) rotate(15deg);
    opacity: 1;
}

.p_item21 {
    bottom: 0%;
    right: 0;
    transform: translateY(20%);
    width: 5em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item21 {
    transform: translateY(0);
    opacity: 1;
}

.p_item22 {
    top: 0%;
    right: 0;
    transform: translate(-15%, -50%) rotate(-15deg);
    width: 10em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item22 {
    transform: translate(15%, -130%) rotate(-5deg);
    opacity: 1;
}

.p_item23 {
    bottom: 0%;
    right: 0;
    transform: translate(0%, 140%) rotate(0deg);
    width: 18em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item23 {
    transform: translate(-40%, 140%) rotate(-10deg);
    opacity: 1;
}

.p_item24 {
    bottom: 0%;
    right: 0;
    transform: translate(0%, 110%) rotate(0deg);
    width: 7em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item24 {
    transform: translate(-33%, 110%) rotate(5deg);
    opacity: 1;
}

.p_item24_1 {
    bottom: 0%;
    right: 0;
    transform: translate(40%, 120%)rotate(35deg);
    width: 4em;
    opacity: 0;
    transition: .2s 1.5s ease;
}
.active .p_item24_1 {
    transform: translate(50%, 100%)rotate(35deg);
    opacity: 1;
}

.p_item25 {
    top: 0%;
    left: 0;
    transform: translate(0%, 30%);
    width: 5em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item25 {
    transform: translate(0%, 50%);
    opacity: 1;
}

.p_item26 {
    bottom: 0%;
    right: 0;
    transform: translate(50%, 30%);
    width: 7em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item26 {
    opacity: 1;
    transform: translate(50%, 50%);
}

.p_item27 {
    top: 0%;
    right: 0;
    transform: translate(-100%, 50%) rotate(20deg);
    width: 2.5em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item27 {
    transform: translate(-30%, 0%) rotate(-6deg);
    opacity: 1;
}

.p_item28 {
    top: 30%;
    left: 0;
    transform: translate(20%, 20%);
    width: 6em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item28 {
    transform: translate(20%, 0%);
    opacity: 1;
}

.p_item29 {
    bottom: 0;
    right: 0;
    transform: translate(-150%, 0%);
    display: flex;
    gap: 1em;
    width: 2.5em;
}

.p_item29 img {
    transform: translateX(-20%);
    opacity: 0;
    transition: .5s 1s ease;
}
.p_item29 img:nth-child(1) {
    transition: .5s 1.2s ease;
}

.active .p_item29 img {
    transform: translateX(0);
    opacity: 1;
}

.p_item30 {
    top: 0%;
    left: 0;
    transform: translate(50%, -100%) rotate(-20deg);
    width: 4em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item30 {
    opacity: 1;
    transform: translate(0%, -130%) rotate(0);
}

.p_item31 {
    bottom: 0%;
    right: 0;
    transform: translate(-30%, 100%) rotate(-30deg);
    width: 8em;
    opacity: 0;
    transition: .5s 1s ease;
}
.active .p_item31 {
    opacity: 1;
    transform: translate(0%, 130%) rotate(-10deg);
}

.out_inner {
    position: relative;
}

.out_deco {
    position: absolute;
    width: 100vw;
    height: 100%;
    margin-left: calc(50% - 50vw);
}

.p_item32 {
    top: 0%;
    right: 0;
    transform: translate(10%, -70%);
    width: 17em;
}

/* 安心安全 */
#safe {
    padding: 10vw 0 0 0;
    text-align: center;
}

.safe-title {
    margin-bottom: 3em;
}

#safe .title {
    margin-bottom: 2.5em;
}

.safe-wrap {
    margin-bottom: 3em;
    padding: 2em;
    border: #F7D061 dashed .3em ;
    border-radius: 3vw;
}
.safe-wrap:last-child {
    margin-bottom: 0;
}

.safe-wrap .flex {
    gap: 2em;
    text-align: left;
    align-items: center;
}
.safe-wrap p.text_1 {
    margin-bottom: .5em;
    line-height: 1.2;
    font-size: 1.6em;
    font-weight: 700;
    color: #723615;
}


.safe-wrap .flex-img {
    aspect-ratio: 2 / 1;
    height: auto;
}

.safe-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 3vw;
    object-fit: cover;
}

@media screen and (max-width: 768px) {

    /* 保育方針 */

    .p_wrap {
        max-width: 600px;
        margin: 0 auto 2em auto;
    }

    #policy .flex {
        display: block;
    }

    #policy .flex-wrap.wrap1 {
        position: relative;
        aspect-ratio: auto;
        width: 100%;
        margin-bottom: 1em;
    }

    #policy .flex-wrap.wrap2 {
        padding: 0;
        width: 100%;
        max-width: initial;
        margin-bottom: 1em;
    }

    #policy .flex-img.img1 {
        width: 100%;
        max-height: 350px;
    }

    #policy .flex-img.img2 {
        position: relative;
        width: 100vw;
        max-height: 350px;
        margin-left: calc(50% - 50vw);
    }

    .flex-img.img2 img {
        width: 80%;
        max-width: 450px;
        border-radius: 0 3vw 3vw 0;
    }

    .p_item1 {
        left: auto;
        right: 0;
        transform: translate(-60% , -100%);
        width: 3.5em;
    }

    .p_item2 {
        top: auto;
        left: auto;
        bottom: 0;
        right: 0;
        transform: translate(-30% , 0);
    }

    .p_item2 img {
        object-fit: contain;
    }



   /* 保育理念 */

    .p_item6 {
        transform: translate(-10% , -260%);
        width: 6em;
    }

    .p_item7 {
        transform: translate(50%, -320%);
        width: 7em;
    }

    .p_item5 {
        transform: translate(20%, -200%);
        width: 5em;
    }

    #philosophy .flex {
        flex-direction: column;
        gap: 1em;
    }

    #philosophy .flex-wrap:nth-child(2) .flex-img {
        aspect-ratio: 5 / 4;
    }


    #philosophy .flex-wrap {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    #philosophy .flex-wrap p {
        text-align: center;
    }

    #philosophy .flex-wrap p.text_1 {
        line-height: 1.5;
        font-size: 1.7em;

    }

    #philosophy .flex-wrap p {
        font-size: .85em;
    }

   /* おちかい */

    #pledge .title_3 {
        margin-bottom: 1em;
    }

    .p_item8 {
        transform: translate(0% , -50%);
        width: 7em;
    }

    .p_item9 {
        transform: translate(-40% , -150%);
        width: 8em;
    }

    #pledge .top_p {
        padding-bottom: 2em;
    }

    #pledge p {
        font-size: 1em;
    }

    .pledge-text p {
        width: 17em;
    }

    .pledge-text {
        margin-bottom: 2em;
    }

    .pledge-img {
        position: relative;
        margin-left: 0;
        margin-top: 2em;

    }

    .pledge-img .inner {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .pledge-img img {
        position: initial;
        display: block;
        width: 80%;
        margin-left: auto;
        border-radius: 3vw 0 0 3vw;
    }
    .pledge-text img:nth-child(1) {
        transform: translateY(0);
        width: 80%;
        max-width: 500px;
    }

    .pledge-text img:nth-child(2) {
        transform: translateY(0);
        aspect-ratio: 1 / 1;
        width: 70%;
        max-width: 400px;
        margin-left: 0;
        border-radius: 0 3vw 3vw 0;
    }

    /* 食のこだわり */

    #food .title {
        margin-bottom: 5em;
    }

    #food.section {
        padding: 0 0 30vw 0;
    }

    .food_leaf1 {
        left: 0;
        transform: translate(10% , 0);
        width: 4em;
    }

    .food_leaf2 {
        left: 0;
        transform: translate(150% , 0);
        width: 3em;
    }

    .food_flower1 {
        right: 0;
        transform: translate(-50% , 0);
        width: 1.2em;
    }

    .food_flower2 {
        right: 0;
        transform: translate(-150% , 0);
        width: 2em;
    }

    #food .flex {
        flex-direction: column;
    }

    #food .flex-wrap {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    #food .flex-wrap.flex-img {
        margin: 0 auto 2em auto;
    }


    .food-title h2 {
        font-size: 1.5em;
    }

    .food-title {
        font-size: 1.2em;
    }

    .food-title::before {
        width: 20em;
    }
    .food-title::after {
        width: 13em;
    }

    #food .flex-wrap.bg_w::before {
        aspect-ratio: auto;
        width: 100vw;
        height: 100%;
        padding: 2em;
        border-radius: 5em;
        background: #fff;

    }

    .flex1 .food-img img {
            width: 100%;
    }
   
    .p_item10 {
        top: 10%;
        width: 11em;

    }

    .p_item14 {
        left: auto;
        transform: translate(0% , 50% ) rotate(20deg);
        width: 3.5em;

    }
    .active .p_item14 {
        transform: translate(0% , 150% ) rotate(20deg);
    }

    .p_item13 {
        top: auto;
        bottom: 0;
        transform: translate(0% , 50%) rotate(-10deg);
        width: 7em;

    }
    .active .p_item13 {
        transform: translate(-30% , 100%) rotate(-10deg);

    }

   .p_item11 {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        transform: translate(0%, -50%) rotate(10deg);
        width: 3em;
    }
    .active .p_item11 {
        transform: translate(0%, -150%) rotate(10deg);
    }

    .p_item12 {
        width: 5em;
    }

    #food .flex {
        margin-bottom: 10em;
    }

    #food .flex.flex2,
    #food .flex.flex4 {
        flex-direction: column-reverse;
    }

    #food .flex.flex3 {
        margin-bottom: 15em;
    }

    #food .flex:nth-child(odd) .flex-wrap {
        text-align: left;
    }

    .food-title {
        margin-right: auto;
        margin-bottom: 2em;
    }

    .p_item18 {
        left: auto;
        right: 0;
        top: 0;
        transform: translate(0 , -130%);
        width: 4em;
    }
    .active .p_item18 {
        transform: translate(0 , -150%);
    }

    .p_item15 {
        top: auto;
        left: auto;
        bottom: 0;
        right: 0;
        transform: translate(-10% , -150%) rotate(-20deg);
        width: 7.5em;
    }
    .active .p_item15 {
        transform: translate(0%, -110%) rotate(-6deg);
    }

    .p_item16 {
        transform: translate(0 , 0) rotate(0);
        width: 5em;
    }
    .active .p_item16 {
        transform: translate(50% , -50%) rotate(-8deg);
    }

    .p_item17 {
        transform: translate(0 , 0) rotate(0);
        width: 5em;
    }
    .active .p_item17 {
        transform: translate(0 , 30%) rotate(15deg);  
    }

    .p_item19 {
        width: 7em;
    }


    .text-box {
        text-align: center;
    }
    .text-box .btn {
        margin-top: 4em;
    }


    .p_item20 {
        width: 3em;
    }
    .p_item21 {
        transform: translate(0 , -180%);
        width: 3em;
    }
    .active .p_item21 {
        transform: translate(0 , -200%);
    }

    .p_item22 {
        transform: translate(-20% , -50%) rotate(-20deg);
        width: 6em;
    }
    .active .p_item22 {
        transform: translate(10% , -120%) rotate(-5deg);
    }

    .p_item23 {
        right: auto;
        left: 0;
        transform: translate(50% , 140%) rotate(0);
        width: 15em;
    }
    .active .p_item23 {
        transform: translate(0 , 140%) rotate(-10deg);
    }

    .p_item24 {
        transform: translate(-50% , 110%) rotate(5deg);
        width: 6em;
    }
    
    .p_item24_1 {
        transform: translate(50% , 80%) rotate(6deg);
        width: 2em;
    }

    .p_item27 {
        width: 2em;
    }

    .p_item26 {
        transform: translate(0 , -120%);
        width: 4em;
    }
    .active .p_item26 {
        transform: translate(0 , -100%);
    }

    .p_item28 {
        width: 4em;
    }

    .p_item29 {
        width: 2em;
    }

    .p_item30 {
        transform: translate(20% , -50%) rotate(-20deg);
        width: 2em;
    }
    .active .p_item30 {
        transform: translate(0 , -100%) rotate(10deg);
    }

    .p_item31 {
        width: 6em;
    }

    .p_item32 {
        width: 9em;
    }
    

    /* 安心安全 */

    .safe-wrap .flex {
        flex-direction: column;
    }


    .safe-wrap .flex-wrap {
        width: 100%;
    }

    .safe-wrap {
        max-width: 600px;
        margin: 0 auto 3em auto;
        padding: 1.5em;
    }

    #food .flex-wrap p {
        padding-right: 0;
    }

    #food .flex2 .flex-wrap p, #food .flex4 .flex-wrap p {
        padding-left: 0;
    }

}