@charset "utf-8";

/* -------------------------全体css------------------------ */
.inner__1000 {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

a {
    display: block;
}

a:hover {
    opacity: .8;
    transition: .4s;
    cursor: pointer;
}

@media (max-width: 820px) {
    .inner__1000 {
        padding: 0 20px;
    }
}
@media (max-width: 767px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}
@media (max-width: 430px) {
    .inner__1000 {
        padding: 0;
    }
}

/* -------------------------fv------------------------ */
.fv {
    position: relative;
}

.fv img {
    width: 100%;
}

.fv_content {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* .tab__menu_box {
    max-width: 700px;
} */

.tab__menu {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin-top: 2em;
}

.xmas_tab_btn01 img {
    position: relative;
}

.xmas_tab_btn01::before {
    content: "";
    display: block;
    /* 要素を表示するための設定 */
    position: absolute;
    /* 必要に応じて位置を指定 */
    top: -26%;
    left: -1%;
    width: 10.5%;
    height: 66%;
    background-image: url('../images/pc/recipi/fv/xmas_btn_deco.png');
    /* 画像パス */
    background-size: cover;
    /* 必要に応じてサイズ調整 */
    background-position: center;
    /* 画像の位置 */
    background-repeat: no-repeat;
    /* 繰り返しを無効に */
    z-index: 1;
    /* 必要に応じて配置を調整 */
}

.xmas_tab_btn01:hover {
    opacity: .8;
    transition: .4s;
    cursor: pointer;
}

.xmas_tab_btn02 img {
    position: relative;
}

.xmas_tab_btn02::before {
    content: "";
    display: block;
    /* 要素を表示するための設定 */
    position: absolute;
    /* 必要に応じて位置を指定 */
    bottom: 0;
    right: 0;
    width: 9%;
    height: 46%;
    background-image: url('../images/pc/recipi/fv/product_btn_deco.png');
    background-size: cover;
    /* 必要に応じてサイズ調整 */
    background-position: center;
    /* 画像の位置 */
    background-repeat: no-repeat;
    /* 繰り返しを無効に */
    z-index: 1;
    /* 必要に応じて配置を調整 */
}

.xmas_tab_btn02:hover {
    opacity: .8;
    transition: .4s;
    cursor: pointer;
}

/* .tab__menu li {
    width: 20vw;
    max-width: 335px;
    height: 8vw;
    max-height: 125px;
} */

.fv_title {
    text-align: center;
}

.fv_title img {
    width: 80%;
    margin-left: 8%;
}

.fv_text {
    margin-top: 2em;
}

.fv_text img {
    width: 100%;
}

/* タブの切り替え設定 */
.tab__panel-box {
    display: none;
}

.tab__panel-box.is-show {
    display: block;
}

/* fv02 */
/* recipi_link */
.r_fv_bg {
    height: 803px;
    position: relative;
}

.p_fv_bg {
    height: 803px;
    position: relative;
}

.fv_bg02 img {
    width: 100%;
}

.p_fv_bg02 img {
    width: 100%;
}

.recipe_link {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    /* max-width: 680px; */
    max-width: 600px;
}

.recipe_link_box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 25px;
}

.recipe_link_box img {
    /* width: 80%; */
    width: 86%;
}

/* product */
.p_recipe_link {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
}

.p_recipe_link_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    row-gap: 1.5em;
    /* width: 84%; */
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.p_recipe_link_box img {
    /* width: 80%; */
    width: 90%;
}


@media (max-width: 1750px) {
    .fv_title img {
        width: 80%;
    }
}

@media (max-width: 1650px) {
    .fv_title img {
        width: 70%;
    }

    .recipe_link {
        max-width: 600px;
    }
}

@media (max-width: 1600px) {
    .fv_title img {
        width: 64%;
    }

    .recipe_link {
        max-width: 530px;
    }

    .tab__menu_box {
        width: 87%;
        margin: 0 auto;
    }
}

@media (max-width: 1500px) {
    .fv_title img {
        width: 63%;
        margin-left: 8%;
    }

    .recipe_link {
        max-width: 490px;
    }
}

@media (max-width: 1450px) {

    /* .fv_title img {
        width: 78%;
        margin-left: 8%;
    } */
    /* .tab__menu img {
        width: 90%;
    }  */
    .tab__menu {
        width: 83%;
        margin: 1.5em auto 0;
    }

    .fv_text {
        margin-top: 1em;
        margin-left: 11%;
    }

    .fv_text img {
        width: 90%;
    }

    /* .recipe_link {
        max-width: 610px;
    } */

    .p_recipe_link {
        max-width: 480px;
    }
}

@media (max-width: 1310px) {
    .fv_title img {
        width: 67%;
    }

    /* .recipe_link {
        max-width: 500px;
    } */

    .p_recipe_link {
        max-width: 450px;
        margin-left: 2%;
    }
}
@media (max-width: 1280px) {
    .recipe_link {
        max-width: 400px;
    }
}

@media (max-width: 1160px) {
    .p_recipe_link {
        max-width: 380px;
    }
}
@media (max-width: 1050px) {
    .recipe_link {
        top: 2%;
    }
}
@media (max-width: 820px) {
    .tab__menu {
        width: 93%;
    }
}

/* -------SP------ */
@media (max-width: 768px) {
    .tab__menu_box {
        width: 100%;
    }
    .tab__menu {
        width: 600px;
        margin: 30% auto 0;
    }
}

@media (max-width: 430px) {
    .tab__menu_box {
        width: 100%;
    }

    .tab__menu {
        width: 350px;
        margin: 25% auto 0;
    }
}

@media (max-width: 393px) {
    .tab__menu {
        width: 332px;
        margin: 22% auto 0;
    }
}

@media (max-width: 375px) {
    .tab__menu {
        width: 317px;
    }
    .p_recipe_link {
        top: 8%;
    }
}


/* -------------------------recipi_bg------------------------ */
.recipe_bg_01 {
    background-image: url('../images/pc/recipi/bg/recipe_bg_01.jpg');
    background-size: cover;
    /* 要素全体を覆う */
    background-position: center;
    background-repeat: no-repeat;
    /* margin-top: -4em; */
    margin-top: -11em;
    padding-top: 3em;
    padding-bottom: 13em;
}

.sweetstown {
    margin-top: 10em;
}

.sweetstown_ttl {
    text-align: center;
}

.sweetstown_con {
    background: url(../images/pc/recipi/01_sweets_town/r_sweetstown_con.png)repeat-y;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 2559px;
    position: relative;
    margin-top: -8%;
}

.sweets_movie_box {
    background: url(../images/pc/recipi/01_sweets_town/r_sweets_movie_bg.png)repeat-y;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 510px;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sweetstown_youtubeLink iframe {
    width: 435px;
    height: 246px;
    margin-top: 19%;
}

.r_st_recipi_btn {
    position: absolute;
    /* top: 54.5%; */
    top: 1274px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.r_st_arrange_btn {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

@media (max-width: 1750px) {
    .recipe_bg_01 {
        margin-top: -15.5em;
    }
}

@media (max-width: 1650px) {
    .recipe_bg_01 {
        margin-top: -18.5em;
    }
}

@media (max-width: 1540px) {
    .recipe_bg_01 {
        margin-top: -14em;
    }

    /* .recipe_link {
        max-width: 650px;
    } */
    .product_bg_01 {
        margin-top: -15em;
    }

    .p_recipe_link {
        top: 8%;
    }

    .p_recipe_link_box {
        width: 71%;
        row-gap: 1.5em;
    }

    .p_recipe_link_box img {
        width: 94%;
    }
}

@media (max-width: 1500px) {
    .recipe_bg_01 {
        margin-top: -23em;
    }
}
@media (max-width: 1480px) {
    .product_bg_01 {
        margin-top: -27em;
    }
}
@media (max-width: 1450px) {
    .recipe_bg_01 {
        margin-top: -24em;
    }
    .p_recipe_link_box {
        width: 69%;
        column-gap: 1em;
    }
}

@media (max-width: 1400px) {
    .recipe_link {
        max-width: 400px;
    }

    .p_recipe_link {
        top: 6%;
    }

    .p_recipe_link_box {
        width: 75%;
    }

    .p_recipe_link_box img {
        width: 89%;
    }
}

@media (max-width: 1370px) {

    /* .recipe_bg_01 {
        margin-top: -20em;
    } */
    /* .recipe_link {
        max-width: 589px;
    } */
    .p_recipe_link {
        top: 5%;
    }

    .p_recipe_link_box {
        width: 72%;
    }

    .p_recipe_link_box img {
        width: 85%;
    }
}

@media (max-width: 1280px) {
    .recipe_bg_01 {
        margin-top: -29em;
    }

    /* .recipe_link {
        max-width: 540px;
    } */
    .product_bg_01 {
        margin-top: -27em;
    }
}

@media (max-width: 1100px) {
    .recipe_bg_01 {
        margin-top: -29em;
    }

    /* .recipe_link {
        max-width: 455px;
    } */
    .product_bg_01 {
        margin-top: -30em;
    }
}
@media (max-width: 820px) {
    .recipe_bg_01 {
        margin-top: -35em;
        padding-bottom: 8em;
    }
    .recipe_link {
        max-width: 366px;
    }
    .p_recipe_link {
        left: 47%;
    }
    .sweetstown_con {
        height: 2100px;
    }
    .sweets_movie_box {
        top: 16%;
        height: 400px;
    }
    .sweetstown_youtubeLink iframe {
        width: 358px;
        height: 202px;
        margin-top: 19%;
    }
    .r_st_recipi_btn {
        top: 1034px;
    }
    .r_st_arrange_btn {
        bottom: 10%;
    }
}

/* -------SP------- */
@media (max-width: 768px) {
    .recipe_bg_01 {
        background-image: url('../images/sp/recipi/sp_bg/sp_bg_01.jpg');
        background-size: cover;
        background-size: contain;
        background-repeat: repeat;
        margin-top: 10em;
    }

    .fv_title {
        opacity: 0;
    }

    .fv_text {
        display: none;
    }

    .fv_bg02 img {
        height: 121%;
    }

    .p_fv_bg02 img {
        height: 670px;
    }

    .recipe_link {
        top: 11%;
        max-width: 594px;
        text-align: center;
    }

    .recipe_link_box {
        grid-template-columns: 1fr 1fr;
        row-gap: 12px;
        top: 14%;
    }

    .p_recipe_link {
        max-width: 750px;
        top: 11%;
    }

    .p_recipe_link_box img {
        width: 88%;
    }

    /* .p_recipe_link_box img {
        width: 158%;
    }  */
    .sweetstown {
        margin-top: 4.5em;
    }

    .sweetstown_ttl img {
        width: 80%;
    }

    .sweetstown_con {
        background: url(../images/sp/recipi/01_sweerstown/r_sp_sweets_con.png)repeat-y;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 2900px;
        position: relative;
        margin-top: 6%;
    }

    .sweets_movie_box {
        background: url(../images/sp/recipi/01_sweerstown/sp_cookie.png)repeat-y;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 77%;
        height: 717px;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sweetstown_youtubeLink iframe {
        width: 400px;
        height: 226px;
        margin-top: 14%;
    }

    .r_st_recipi_btn {
        top: 1570px;
    }

    .r_st_recipi_btn img {
        width: 79vw;
    }

    .r_st_arrange_btn {
        bottom: 3.5%;
    }

    .r_st_arrange_btn img {
        width: 79vw;
    }
}

@media (max-width: 600px) {
    .recipe_bg_01 {
        background-image: url('../images/sp/recipi/sp_bg/sp_bg_01.jpg');
        background-size: cover;
        background-size: contain;
        background-repeat: repeat;
        margin-top: -22em;
    }

    .sweetstown {
        margin-top: 4.5em;
    }

    .sweetstown_ttl img {
        width: 80%;
    }

    .sweetstown_con {
        background: url(../images/sp/recipi/01_sweerstown/r_sp_sweets_con.png)repeat-y;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 2300px;
        position: relative;
        margin-top: 6%;
    }

    .sweets_movie_box {
        background: url(../images/sp/recipi/01_sweerstown/sp_cookie.png)repeat-y;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 80%;
        height: 576px;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sweetstown_youtubeLink iframe {
        width: 338px;
        height: 192px;
        margin-top: 14%;
    }

    .r_st_recipi_btn img {
        width: 79vw;
    }

    .r_st_arrange_btn {
        bottom: 3.5%;
    }

    .r_st_arrange_btn img {
        width: 79vw;
    }
}

@media (max-width: 500px) {
    .recipe_link {
        left: 63.5%;
    }

    .recipe_link_box {
        width: 76%;
    }

    .recipe_bg_01 {
        margin-top: -28em;
    }

    .sweetstown_con {
        height: 1900px;
    }

    .sweets_movie_box {
        height: 458px;
    }

    .sweetstown_youtubeLink iframe {
        width: 277px;
        height: 152px;
    }
}

@media (max-width: 430px) {
    .recipe_link {
        top: 2%;
        max-width: 393px;
    }

    .recipe_link_box {
        width: 75%;
    }

    .sweetstown_con {
        height: 1500px;
    }

    .sweets_movie_box {
        height: 372px;
    }

    .sweetstown_youtubeLink iframe {
        width: 218px;
        height: 123px;
    }

    .r_st_recipi_btn {
        top: 820px;
    }

    .r_st_recipi_btn img {
        width: 77vw;
    }

    .r_st_arrange_btn img {
        width: 77vw;
    }
    .recipe_bg_01 {
        margin-top: -26em;
    }

    .r_st_recipi_btn {
        width: 100%;
        text-align: center;
    }

    .r_st_arrange_btn {
        width: 100%;
        text-align: center;
    }
    .p_recipe_link {
        top: 7%;
    }
    .p_fv_bg02 img {
        height: 460px;
    }
}

@media (max-width: 390px) {
    .recipe_bg_01 {
        margin-top: -26em;
    }
}

@media (max-width: 380px) {
    .recipe_link {
        left: 65.5%;
    }

    .recipe_bg_01 {
        margin-top: -30em;
    }

    .sweetstown_con {
        margin-top: 3%;
    }

    .r_st_arrange_btn {
        bottom: 4%;
    }
}

@media (max-width: 375px) {
    .recipe_link {
        top: 7%;
        max-width: 375px;
    }

    .recipe_link_box {
        width: 72%;
        row-gap: 10px;
    }

    .r_st_arrange_btn {
        bottom: 4.8%;
    }
}

@media (max-width: 360px) {
    .sweetstown_con {
        height: 1430px;
    }

    .sweetstown_youtubeLink iframe {
        width: 200px;
        height: 111px;
    }
}

/* -------------------------mix------------------------ */
.r_mix_ttl {
    text-align: center;
    margin-top: -8%;
}

.mix_box_column01 {
    display: flex;
    gap: 1em;
    margin-top: 3%;
}

.mix_box_column02 {
    text-align: center;
    margin-top: 3%;
}

.mix_01,
.mix_02 {
    position: relative;
}

.mix_btn01,
.mix_btn02 {
    position: absolute;
    bottom: 7%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.mix_03 {
    position: relative;
}

.mix_btn03 {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 820px) {
    .mix_03 .main img {
        width: 50%;
    }
    .mix_btn01 img,
    .mix_btn02 img {
        width: 73%;
    }
    .r_mix_ttl {
        margin-top: -14%;
    }
    .mix_btn03 {
        left: 49%;
    }
    .mix_btn03 img {
        width: 87%;
    }
}

@media (max-width: 768px) {
    .mix_box .main img {
        width: 80%;
    }

    .mix_box_column01 {
        flex-direction: column;
        text-align: center;
    }

    .r_mix_ttl {
        margin-top: 0;
    }

    .r_mix_ttl img {
        width: 58%;
    }

    .mix_btn01 img,
    .mix_btn02 img {
        width: 56%;
    }
    .mix_btn03 {
        left: 48%;
    }
    .mix_btn03 img {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .mix_btn01,
    .mix_btn02,
    .mix_btn03 {
        width: 56%;
    }

    .mix_btn01 img,
    .mix_btn02 img,
    .mix_btn03 img {
        width: 100%;
    }
}

/* -------------------------cookSponge------------------------ */
.cookSponge_ttl {
    text-align: center;
    margin-top: 2em;
}

.cookSponge_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3%;
    row-gap: 1.5%;
    margin-top: 2em;
}

.cookSponge_box li {
    position: relative;
}

.r_sp_btn {
    position: absolute;
    bottom: 3%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}
@media (max-width: 820px) {
    .r_sp_btn {
        bottom: 6%;
    }
    .r_sp_btn img {
        width: 72%;
    }
}
@media (max-width: 768px) {
    .cookSponge_box {
        grid-template-columns: 1fr;
        row-gap: 0.5%;
        text-align: center;
    }

    .cookSponge_box .main img {
        width: 80%;
    }

    .cookSponge_ttl img {
        width: 80%;
    }
    .r_sp_btn img {
        width: 56%;
    }
}

@media (max-width: 430px) {
    .r_sp_btn {
        bottom: 6%;
        width: 56%;
    }
    .r_sp_btn img {
        width: 100%;
    }
}
@media (max-width: 390px) {
    .r_sp_btn {
        bottom: 5.5%;
    }
}

@media (max-width: 375px) {
    .cookSponge_ttl {
        margin-top: 1.2em;
    }
}

/* -------------------------present------------------------ */
.present_ttl {
    text-align: center;
    margin-top: 9.5em;
}

.present_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3%;
    row-gap: 1.5%;
    margin-top: 2em;
}

.present_box li {
    position: relative;
}

.r_ps_btn {
    position: absolute;
    bottom: 6%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

@media (max-width: 820px) {
    .r_ps_btn img {
        width: 72%;
    }
    .present_ttl {
        margin-top: 5.5em;
    }
}
@media (max-width: 768px) {
    .present_box {
        grid-template-columns: 1fr;
        row-gap: 0.5%;
        text-align: center;
    }

    .present_box .main img {
        width: 80%;
    }

    .present_ttl {
        margin-top: 5.5em;
    }

    .present_ttl img {
        width: 80%;
    }

    .r_ps_btn img {
        width: 56%;
    }
}

@media (max-width: 600px) {
    .present_ttl {
        margin-top: 12.5em;
    }
}

@media (max-width: 500px) {
    .present_ttl {
        margin-top: 11em;
    }

    .recipe_bg_01 {
        padding-bottom: 10em;
    }
}

@media (max-width: 430px) {
    .present_ttl {
        margin-top: 8.5em;
    }
    .recipe_bg_01 {
        padding-bottom: 9em;
    }
    .r_ps_btn {
        width: 56%;
        bottom: 5.5%;
    }
    .r_ps_btn img {
        width: 100%;
    }
}

@media (max-width: 393px) {
    .present_ttl {
        margin-top: 8.5em;
    }
}

@media (max-width: 375px) {
    .recipe_bg_01 {
        margin-top: -26em;
    }
}

@media (max-width: 360px) {
    .present_ttl {
        margin-top: 8.5em;
    }
}

/* -------------------------party_s------------------------ */
.party_sweets_ttl {
    text-align: center;
    margin-top: 4.5em;
}

.party_sweets_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3%;
    row-gap: 1.5%;
    margin-top: 2em;
}

.party_sweets_box li {
    position: relative;
}

.party_s_btn {
    position: absolute;
    bottom: 6%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

@media (max-width: 820px) {
    .party_s_btn img {
        width: 72%;
    }
}
@media (max-width: 768px) {
    .party_sweets_box {
        grid-template-columns: 1fr;
        row-gap: 0.5%;
        text-align: center;
    }

    .party_sweets_box .main img {
        width: 80%;
    }

    .party_sweets_ttl img {
        width: 80%;
    }

    .party_s_btn img {
        width: 56%;
    }
}
@media (max-width: 430px) {
    .party_s_btn {
        width: 56%;
        bottom: 5.5%;
    }
    .party_s_btn img {
        width: 100%;
    }
}
@media (max-width: 393px) {
    .party_sweets_ttl {
        margin-top: 2.2em;
    }
}

/* -------------------------party_d------------------------ */
.party_dinner_ttl {
    text-align: center;
    margin-top: 4.5em;
}

.party_dinner_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3%;
    row-gap: 1.5%;
    margin-top: 2em;
}

.party_dinner_box li {
    position: relative;
}

.party_d_btn {
    position: absolute;
    bottom: 6%;
    left: 48%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

@media (max-width: 820px) {
    .party_d_btn img {
        width: 72%;
    }
}
@media (max-width: 768px) {
    .party_dinner_box {
        grid-template-columns: 1fr;
        row-gap: 0.5%;
        text-align: center;
    }

    .party_dinner_box .main img {
        width: 80%;
    }

    .party_dinner_ttl img {
        width: 80%;
    }

    .party_d_btn img {
        width: 56%;
    }
}

@media (max-width: 430px) {
    .party_dinner_ttl {
        margin-top: 2.5em;
    }
    .party_d_btn {
        width: 56%;
        bottom: 5.5%;
    }
    .party_d_btn img {
        width: 100%;
    }
}

@media (max-width: 393px) {
    .party_dinner_ttl {
        margin-top: 2.5em;
    }
}

/* -------------------------contest------------------------ */
.contest_back {
    margin-top: -5em;
    position: relative;
}

.contest_back img {
    width: 100%;
}

.contest_box {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contest_bnr img {
    width: 99.5%;
}

@media (max-width: 1750px) {
    .contest_box {
        width: 41%;
    }

    .contest_box {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .contest_box {
        width: 82%;
        gap: 20px;
        top: 25%;
    }
}

/* -------------------------product------------------------ */
.product_bg_01 {
    background-image: url('../images/pc/product/bg_pc/bg_pc_01.jpg');
    background-size: cover;
    /* 要素全体を覆う */
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 9em;
    /* margin-top: -15em; */
    margin-top: -18em;
}

.p_spongeCake_ttl {
    text-align: center;
    margin-top: 5.5em;
}

.p_spongeCake_con {
    background: url(../images/pc/product/01_sponge/p_sponge_con.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 992px;
    position: relative;
}

.p_sp_btn {
    position: absolute;
    bottom: 11%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

/* ↑スポンジ終わり */
/* ここからハンドメイドキット */
.p_handMadeKit_ttl {
    text-align: center;
    margin-top: 5.5em;
}

.p_handMadeKit_con {
    background: url(../images/pc/product/02_handmade/p_hd_con.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 3110px;
    position: relative;
    margin-top: -3.5em;
}

.p_hd_movie_box {
    background: url(../images/pc/recipi/01_sweets_town/r_sweets_movie_bg.png)repeat-y;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 510px;
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.p_hd_youtubeLink iframe {
    width: 435px;
    height: 246px;
    margin-top: 19%;
}

/* hd_thum */
.hd_thum01 {
    position: absolute;
    bottom: 28.7%;
    left: 15%;
}

.hd_thum02 {
    position: absolute;
    bottom: 11%;
    left: 15%;
}

/* hd_btn */
.p_hd_btn01 {
    position: absolute;
    top: 29.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.p_hd_btn02 {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.p_hd_btn03 {
    position: absolute;
    bottom: 6.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

@media (max-width: 1540px) {
    .product_bg_01 {
        /* margin-top: -16.5em; */
        margin-top: -26.5em;
    }
}

@media (max-width: 1400px) {
    .product_bg_01 {
        /* margin-top: -19.5em; */
        margin-top: -24em;
    }
}

@media (max-width: 1370px) {
    .product_bg_01 {
        /* margin-top: -21.5em; */
        margin-top: -25em;
    }
}

@media (max-width: 1290px) {
    .product_bg_01 {
        /* margin-top: -23.5em; */
        margin-top: -28em;
    }
}

@media (max-width: 1170px) {
    .product_bg_01 {
        margin-top: -26.5em;
    }
}

@media (max-width: 1100px) {
    .product_bg_01 {
        margin-top: -29.5em;
    }
}
@media (max-width: 940px) {
    .p_hd_btn02 {
        bottom: 26%;
    }
    .p_hd_btn03 {
        bottom: 8.2%;
    }
}
@media (max-width: 880px)  {
    .p_hd_btn02 {
        bottom: 27%;
    }
    .p_hd_btn03 {
        bottom: 10.2%;
    }
}
@media (max-width: 840px)  {
    .p_hd_btn02 {
        bottom: 24%;
    }
    .p_hd_btn03 {
        bottom: 5.5%;
    }
    /* .p_hd_btn02 {
        bottom: 28.5%;
    }
    .p_hd_btn03 {
        bottom: 12.2%;
    } */
}
@media (max-width: 820px) {
    .product_bg_01 {
        margin-top: -38.5em;
    }
    .p_spongeCake_con {
        height: 780px;
    }
    .p_handMadeKit_ttl {
        margin-top: 2.5em;
    }
    .p_handMadeKit_con {
        height: 2450px;
    }
    .p_hd_movie_box {
        height: 403px;
    }
    .p_hd_youtubeLink iframe {
        width: 351px;
        height: 198px;
        margin-top: 19%;
    }
    .p_hd_btn02 {
        bottom: 25%;
    }
    .p_hd_btn03 {
        bottom: 5%;
    }
}
@media (max-width: 800px) {
    .p_hd_btn03 {
        bottom: 14%;
    }
}
@media (max-width: 768px) {
    .fv_bg02 img {
        height: 90%;
    }
    .product_bg_01 {
        margin-top: -17.5em;
    }

    .product_bg_01 {
        background-image: url('../images/sp/product/bg_sp/p_sp_bg_01.jpg');
        background-size: contain;
        background-position: center;
        background-repeat: repeat;
    }

    .p_spongeCake_ttl img {
        width: 65%;
        margin-top: -2.5em;
    }

    .p_spongeCake_con {
        background: url(../images/sp/product/01_sponge/p_sp_sponge_con.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 1600px;
        position: relative;
    }

    .p_sp_btn {
        bottom: 9%;
    }

    .p_sp_btn img {
        width: 78vw;
    }

    .p_handMadeKit_con {
        background: url(../images/sp/product/02_handmade/p_sp_hd_con.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 6100px;
        position: relative;
        margin-top: -3.5em;
    }

    .p_hd_movie_box {
        background: url(../images/sp/recipi/01_sweerstown/sp_cookie.png)repeat-y;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 84%;
        height: 708px;
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .p_handMadeKit_ttl {
        margin-top: 1em;
    }

    .p_handMadeKit_ttl img {
        width: 44%;
    }

    .hd_thum01 {
        bottom: 39%;
    }

    .hd_thum01 img {
        width: 80%;
    }


    .p_hd_btn01 {
        top: 30.5%;
    }

    .p_hd_btn01 img {
        width: 78vw;
    }

    .p_hd_btn02 {
        bottom: 29%;
    }

    .p_hd_btn02 img {
        width: 78vw;
    }

    .p_hd_btn03 {
        bottom: 3.7%;
    }

    .p_hd_btn03 img {
        width: 78vw;
    }
}

@media (max-width: 600px) {
    .product_bg_01 {
        margin-top: -25em;
    }

    .p_recipe_link {
        max-width: 410px;
    }

    .p_recipe_link_box {
        width: 104%;
        margin: 0 auto;
        margin-left: 0;
        text-align: center;
    }

    .fv_bg02 img {
        height: 63%;
    }

    .p_spongeCake_ttl img {
        margin-top: -6.5em;
    }

    .p_spongeCake_con {
        height: 1000px;
    }

    .p_handMadeKit_con {
        height: 4000px;
    }

    .p_hd_movie_box {
        height: 480px;
    }

    .p_hd_youtubeLink iframe {
        width: 268px;
        height: 152px;
        margin-top: 13%;
    }
}

@media (max-width: 500px) {
    .fv_bg02 img {
        height: 550px;
    }

    .p_recipe_link_box {
        width: 90%;
        margin-left: 4%;
        row-gap: 1em;
    }

    .p_spongeCake_ttl {
        margin-top: 1.5em;
    }

    .p_spongeCake_con {
        height: 800px;
    }

    .p_handMadeKit_con {
        height: 3250px;
    }

    .p_hd_movie_box {
        height: 405px;
    }

    .p_hd_youtubeLink iframe {
        width: 212px;
        height: 119px;
        margin-top: 13%;
    }

    .p_hd_btn02 {
        bottom: 29.3%;
    }

    .p_hd_btn03 {
        bottom: 4.5%;
    }
}

@media (max-width: 430px) {
    .fv_bg02 img {
        height: 500px;
    }
    .product_bg_01 {
        margin-top: -30.5em;
    }

    .p_recipe_link {
        top: 9%;
        max-width: 375px;
    }

    .p_sp_btn {
        bottom: 7%;
    }

    .p_handMadeKit_con {
        height: 3450px;
    }
}

@media (max-width: 416px) {
    .p_handMadeKit_con {
        height: 3330px;
    }
}

@media (max-width: 393px) {
    .fv_bg02 img {
        height: 50%;
    }

    .product_bg_01 {
        margin-top: -31em;
    }

    .p_spongeCake_con {
        height: 860px;
        margin-top: -1.5em;
    }

    .p_handMadeKit_con {
        height: 3140px;
    }
    .p_handMadeKit_ttl {
        margin-top: -1.5em;
    }
    .p_sp_btn {
        bottom: 11%;
    }
    .p_hd_btn01 {
        top: 30.9%;
    }
}

@media (max-width: 375px) {
    .fv_bg02 img {
        height: 40%;
    }

    .p_handMadeKit_con {
        height: 3020px;
    }
    .p_recipe_link {
        top: 3%;
        max-width: 334px;
    }
    .p_hd_movie_box {
        top: 32.5%;
    }
    .p_hd_btn03 {
        bottom: 4.3%;
    }
}

@media (max-width: 360px) {
    .p_handMadeKit_con {
        height: 2910px;
    }

    .p_spongeCake_con {
        height: 710px;
    }

    .p_hd_movie_box {
        height: 362px;
    }
}

/* -------------------------sumikko------------------------ */
.product_bg_02 {
    background-image: url('../images/pc/product/bg_pc/bg_pc_02.jpg');
    background-size: cover;
    /* 要素全体を覆う */
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 8em;
    padding-bottom: 3em;
}

.sumikkoXmas_ttl {
    text-align: center;
    width: 95%;
}

.sumikkoXmas_con {
    background: url(../images/pc/product/03_sumikko/sumikko_con.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 2307px;
    position: relative;
    margin-top: 2.5em;
}

.p_sx_btn01 {
    position: absolute;
    top: 34.3%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.p_sx_btn02 {
    position: absolute;
    bottom: 34.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.p_sx_btn03 {
    position: absolute;
    bottom: 6.8%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}
@media (max-width: 820px) {
    .sumikkoXmas_con {
        height: 1700px;
    }
    .product_bg_02 {
        padding-top: 4em;
    }
    .p_sx_btn01 {
        top: 33.6%;
    }
    .p_sx_btn02 {
        bottom: 32.9%;
    }
    .p_sx_btn03 {
        bottom: 5.6%;
    }
}

@media (max-width: 768px) {
    .product_bg_02 {
        background-image: url('../images/sp/product/bg_sp/p_sp_sumikko_bg.jpg');
        background-size: cover;
        /* 要素全体を覆う */
        background-position: center;
        background-repeat: no-repeat;
    }

    .sumikkoXmas_con {
        background: url(../images/sp/product/03_sumikko/sumikko_con.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 4900px;
        position: relative;
        margin-top: 2.5em;
    }

    .sumikkoXmas_ttl img {
        width: 68%;
    }

    .p_sx_btn01 {
        top: 30.5%;
    }

    .p_sx_btn01 img {
        width: 78vw;
    }

    .p_sx_btn02 {
        bottom: 35%;
    }

    .p_sx_btn02 img {
        width: 78vw;
    }

    .p_sx_btn03 {
        bottom: 4.4%;
    }

    .p_sx_btn03 img {
        width: 78vw;
    }
}

@media (max-width: 600px) {
    .sumikkoXmas_con {
        height: 3000px;
    }

    .p_sx_btn01 {
        top: 30%;
    }
}

@media (max-width: 430px) {
    .product_bg_02 {
        padding-top: 4em;
    }

    .sumikkoXmas_con {
        height: 2500px;
        margin-top: 1.5em;
    }

    .p_sx_btn01 img,
    .p_sx_btn02 img,
    .p_sx_btn03 img {
        width: 75vw;
    }
}

@media (max-width: 416px) {
    .p_sx_btn01 {
        top: 30.4%;
    }
}

@media (max-width: 400px) {
    .product_bg_02 {
        padding-top: 4em;
    }

    .sumikkoXmas_con {
        height: 2500px;
    }
}

@media (max-width: 380px) {
    .product_bg_02 {
        padding-top: 3.5em;
    }

    .sumikkoXmas_con {
        height: 2380px;
        margin-top: 1.2em;
    }
}

@media (max-width: 375px) {
    .product_bg_02 {
        padding-bottom: 1.5em;
    }
}

@media (max-width: 360px) {
    .sumikkoXmas_con {
        height: 2180px;
    }
}


/* -------------------------decoration--------------------- */
.product_bg_03 {
    background-image: url('../images/pc/product/bg_pc/bg_pc_03.jpg');
    background-size: cover;
    /* 要素全体を覆う */
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 13em;
}

.decoration_con {
    background: url(../images/pc/product/04_deco/deco_con.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 6763px;
    position: relative;
}

/* -----mere------- */
.deco_mere_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 2em;
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 79%;
}

.deco_mere_box li {
    position: relative;
}

.p_deco_btn {
    position: absolute;
    right: -30%;
    bottom: 0;
}

.p_deco_btn img {
    width: 68.5%;
}

@media (max-width: 1280px) {
    .product_bg_03 {
        padding-bottom: 6em;
    }
}
@media (max-width: 1050px) {
    .product_bg_03 {
        padding-bottom: 7em;
    }
}
@media (max-width: 820px) {
    .deco_mere_box {
        top: 8.5%;
    }
    .product_bg_03 {
        padding-bottom: 4em;
    }
    .decoration_con {
        height: 5310px;
    }
    .p_deco_btn  {
        right: -51%;
    }
    .p_deco_btn img {
        width: 60%;
    }
}
@media (max-width: 768px) {
    .product_bg_03 {
        background-image: url('../images/sp/product/bg_sp/p_sp_bg_01.jpg');
        background-size: contain;
        background-position: center;
        background-repeat: repeat;
        padding-bottom: 5.5em;
    }

    .decoration_con {
        background: url(../images/sp/product/04_deco/p_sp_deco_con.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 16410px;
        position: relative;
    }

    .deco_mere_box {
        grid-template-columns: 1fr;
        top: 3.3%;
        text-align: center;
    }

    .deco_mere_box img {
        width: 79vw;
    }

    .p_deco_btn {
        position: absolute;
        right: -8%;
        bottom: 0;
    }

    .p_deco_btn img {
        width: 80%;
    }
}

@media (max-width: 600px) {
    .product_bg_03 {
        padding-bottom: 3.5em;
    }

    .decoration_con {
        height: 10750px;
    }

    .p_deco_btn {
        right: -29%;
    }

    .p_deco_btn img {
        width: 50%;
    }

    .deco_mere_box {
        top: 3.5%;
        row-gap: 1em;
    }
}

@media (max-width: 430px) {
    .product_bg_03 {
        padding-bottom: 5.5em;
    }
    .decoration_con {
        height: 9250px;
    }
    .deco_mere_box {
        top: 3%;
    }
    .deco_mere_box img {
        width: 79vw;
    }

    .p_deco_btn {
        right: -39%;
    }

    .p_deco_btn img {
        width: 46%;
    }
}

@media (max-width: 416px) {
    .decoration_con {
        height: 8900px;
    }
}

@media (max-width: 393px) {
    .decoration_con {
        height: 8350px;
    }
}

@media (max-width: 375px) {
    .decoration_con {
        height: 8050px;
    }
}



/* -----pick------- */
.deco_pick_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 2em;
    position: absolute;
    top: 20.5%;
    left: 50%;
    transform: translateX(-50%);
    /* 追加 */
    width: 78%;
}

.deco_pick_box li {
    position: relative;
}

.p_pick_btn {
    position: absolute;
    right: -30%;
    bottom: 0;
}

.p_pick_btn img {
    width: 68.5%;
}
@media (max-width: 820px) {
    .deco_pick_box {
        top: 21%;
    }
    .p_pick_btn {
        right: -52%;
    }
    .p_pick_btn img {
        width: 60%;
    }
}
@media (max-width: 768px) {
    .deco_pick_box {
        grid-template-columns: 1fr;
        top: 16.2%;
    }

    .deco_pick_box img {
        width: 79vw;
    }

    .p_pick_btn {
        right: -16%;
    }

    .p_pick_btn img {
        width: 80%;
    }
}

@media (max-width: 600px) {
    .p_pick_btn {
        right: -58%;
    }

    .p_pick_btn img {
        width: 50%;
    }
}

@media (max-width: 430px) {
    .deco_pick_box {
        row-gap: 1.5em;
    }

    .deco_pick_box img {
        width: 79vw;
    }

    .p_pick_btn {
        right: -81%;
    }

    .p_pick_btn img {
        width: 44%;
    }
}

@media (max-width: 416px) {
    .deco_pick_box {
        top: 16.4%;
    }
}

@media (max-width: 393px) {
    .deco_pick_box {
        top: 16.2%;
        row-gap: 1.5em;
    }

    .p_pick_btn {
        right: -92%;
    }

    .p_pick_btn img {
        width: 42%;
    }
}

@media (max-width: 375px) {
    .deco_pick_box {
        top: 16.35%;
    }

    .deco_pick_box {
        row-gap: 1.3em;
    }

    .p_pick_btn {
        right: -95%;
    }

    .p_pick_btn img {
        width: 41%;
    }
}

@media (max-width: 360px) {
    .p_pick_btn {
        right: -101%;
    }

    .p_pick_btn img {
        width: 40%;
    }
}

/* -----orna------- */
.deco_orna_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 2em;
    position: absolute;
    top: 29.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}

.deco_orna_box li {
    position: relative;
}

.p_orna_btn {
    position: absolute;
    right: -30%;
    bottom: 0;
}

.p_orna_btn img {
    width: 68.5%;
}
@media (max-width: 820px) {
    .deco_orna_box {
        top: 30%;
    }
    .p_orna_btn {
        right: -54%;
    }
    .p_orna_btn img {
        width: 58%;
    }
}
@media (max-width: 768px) {
    .deco_orna_box {
        grid-template-columns: 1fr;
        top: 26%;
    }

    .deco_orna_box img {
        width: 79vw;
    }

    .p_orna_btn {
        right: -18%;
    }

    .p_orna_btn img {
        width: 80%;
    }
}

@media (max-width: 600px) {
    .deco_orna_box {
        row-gap: 1.5em;
    }

    .p_orna_btn {
        right: -58%;
    }

    .p_orna_btn img {
        width: 50%;
    }
}

@media (max-width: 430px) {
    .deco_orna_box {
        top: 25.5%;
    }
    .deco_orna_box img {
        width: 79vw;
    }

    .p_orna_btn {
        right: -82%;
    }

    .p_orna_btn img {
        width: 43%;
    }
}

@media (max-width: 416px) {
    .p_orna_btn {
        right: -85%;
    }

    .p_orna_btn img {
        width: 42%;
    }
}

@media (max-width: 393px) {
    .deco_orna_box {
        top: 26.1%;
        row-gap: 1em;
    }

    .p_orna_btn {
        right: -93%;
    }

    .p_orna_btn img {
        width: 39%;
    }
}

@media (max-width: 375px) {
    .p_orna_btn {
        right: -101%;
    }

    .p_orna_btn img {
        width: 38%;
    }
}

@media (max-width: 360px) {
    .p_orna_btn {
        right: -106%;
    }

    .p_orna_btn img {
        width: 38%;
    }
}

/* ------tarte------- */
.deco_tarte_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 2em;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    width: 77%;
}

.deco_tarte_box li {
    position: relative;
}

.p_tarte_btn {
    position: absolute;
    right: -30%;
    bottom: 0;
}

.p_tarte_btn img {
    width: 68.5%;
}
@media (max-width: 820px) {
    .p_tarte_btn {
        right: -54%;
    }
    .p_tarte_btn img {
        width: 58%;
    }
}
@media (max-width: 768px) {
    .deco_tarte_box {
        grid-template-columns: 1fr;
        top: 37.7%;
    }

    .deco_tarte_box img {
        width: 79vw;
    }

    .p_tarte_btn {
        right: -15.5%;
    }

    .p_tarte_btn img {
        width: 80%;
    }
}

@media (max-width: 600px) {
    .p_tarte_btn {
        right: -58%;
    }

    .p_tarte_btn img {
        width: 50%;
    }
}

@media (max-width: 430px) {
    .deco_tarte_box {
        row-gap: 1.5em;
    }

    .deco_tarte_box img {
        width: 79vw;
    }

    .p_tarte_btn {
        right: -81%;
    }

    .p_tarte_btn img {
        width: 44%;
    }
}

@media (max-width: 393px) {
    .p_tarte_btn {
        right: -91%;
    }

    .p_tarte_btn img {
        width: 42%;
    }
}

@media (max-width: 375px) {
    .p_tarte_btn {
        right: -96%;
    }

    .p_tarte_btn img {
        width: 41%;
    }
}

@media (max-width: 360px) {
    .p_tarte_btn {
        right: -102%;
    }

    .p_tarte_btn img {
        width: 40%;
    }
}

/* ------toppi------- */
.deco_toppi_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 2em;
    position: absolute;
    top: 50.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
}

.p_toppi_btn {
    position: absolute;
    bottom: -9%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}
@media (max-width: 820px) {
    .deco_toppi_box {
        row-gap: 1em;
    }
}
@media (max-width: 768px) {
    .deco_toppi_box {
        grid-template-columns: 1fr;
        top: 45%;
        row-gap: 2em;
    }

    .deco_toppi_box img {
        width: 79vw;
    }

    .p_toppi_btn {
        bottom: -5%;
    }

    .p_toppi_btn img {
        width: 540px;
    }
}

@media (max-width: 600px) {
    .deco_toppi_box {
        row-gap: 1.3em;
    }

    .p_toppi_btn img {
        width: 350px;
    }
}

@media (max-width: 430px) {
    .deco_toppi_box {
        row-gap: 1.5em;
    }

    .deco_toppi_box img {
        width: 79vw;
    }

    .p_toppi_btn {
        bottom: -4.2%;
    }

    .p_toppi_btn img {
        width: 300px;
    }
}

@media (max-width: 393px) {
    .deco_toppi_box {
        row-gap: 1.3em;
    }
    .p_toppi_btn {
        bottom: -4.2%;
    }

    .p_toppi_btn img {
        width: 290px;
    }
}

@media (max-width: 360px) {
    .p_toppi_btn img {
        width: 285px;
    }
}

@media (max-width: 360px) {
    .deco_toppi_box {
        row-gap: 1.1em;
    }

    .p_toppi_btn img {
        width: 266px;
    }
}


/* ------icing------- */
.icing_wrap {
    position: absolute;
    top: 77.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 78%;
}

.deco_icing_box01 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2em;
    row-gap: 2em;
}

.deco_icing_box01 li {
    position: relative;
}

.p_ic_btn {
    position: absolute;
    right: -30%;
    bottom: 0;
}

.p_ic_btn img {
    width: 68.5%;
}
@media (max-width: 820px) {
    .icing_wrap {
        top: 77%;
    }
    .deco_icing_box01 {
        row-gap: 1.2em;
    }
    .p_ic_btn {
        right: -51%;
    }
    .p_ic_btn img {
        width: 60.5%;
    }
}
@media (max-width: 768px) {
    .icing_wrap {
        top: 74.35%;
    }

    .deco_icing_box01 {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 2.5em;
    }

    .deco_icing_box01 img {
        width: 79vw;
    }

    .p_ic_btn {
        right: -6.5%;
    }

    .p_ic_btn img {
        width: 80%;
    }
}

@media (max-width: 600px) {
    .deco_icing_box01 {
        row-gap: 1.4em;
    }

    .decopen_box {
        row-gap: 2em;
    }

    .p_ic_btn {
        right: -28%;
    }

    .p_ic_btn img {
        width: 50%;
    }
}

@media (max-width: 430px) {
    .icing_wrap {
        top: 75%;
    }
    .deco_icing_box01 {
        row-gap: 2em;
    }
    .p_ic_btn {
        right: -39%;
    }

    .p_ic_btn img {
        width: 47%;
    }
}

/* ------decopen------- */
.decopen_text {
    text-align: center;
    margin-top: 2.6em;
    margin-bottom: 2em;
}

.decopen_box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1em;
    row-gap: 1.5em;
}

.dekopen_11 {
    text-align: center;
    margin-top: 3em;
    margin-bottom: 2em;
}

.p_decopen_btn {
    text-align: center;
}
@media (max-width: 820px) {
    .decopen_text {
        margin-top: 1.2em;
        margin-bottom: 1em;
    }
    .decopen_text img {
        width: 21vw;
    }
    .decopen_box {
        row-gap: 1em;
    }
    .dekopen_11 {
        margin-top: 1.5em;
        margin-bottom: 1em;
    }
    .dekopen_11 img {
        width: 90%;
    }
    .decopen_box img {
        width: 90%;
    }
}
@media (max-width: 768px) {
    .decopen_box {
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: center;
        row-gap: 2.5em;
    }

    .decopen_box li:last-child {
        justify-self: center;
    }

    .decopen_box img {
        width: 23vw;
    }

    .decopen_text {
        text-align: left;
        margin: 4em 0;
    }

    .dekopen_11 img {
        width: 91%;
    }

    .p_decopen_btn img {
        width: 78vw;
    }
}

@media (max-width: 600px) {
    .decopen_text {
        margin: 3em 0;
    }

    .decopen_text img {
        width: 44vw;
    }
}

@media (max-width: 430px) {
    .deco_icing_box01 {
        row-gap: 1.3em;
    }

    .decopen_text {
        margin: 2em 0;
    }
    .decopen_text img {
        width: 52vw;
    }
    .decopen_box {
        row-gap: 2em;
    }
}

@media (max-width: 393px) {
    .dekopen_11 {
        margin-top: 2.5em;
    }
}

@media (max-width: 360px) {
    .dekopen_11 {
        margin-top: 2em;
    }
}

.hd_thum01 {
    bottom: 29.9%;
    left: 17.4%;
}
.hd_thum01 iframe {
    width: 89.9%;
} 
@media (max-width: 980px) {
    .hd_thum01 {
        bottom: 30.25%;
        left: 17.5%;
    }
    .hd_thum01 iframe {
    width: 263px;
    height: 147px;
    }
}
@media (max-width: 960px) {
    .hd_thum01 {
        bottom: 30.6%;
        left: 17.3%;
    }
    .hd_thum01 iframe {
        width: 260px;
    }
    .hd_thum02 {
        bottom: 12.4%;
    }
}
@media (max-width: 940px) {
    .hd_thum01 {
        bottom: 31.05%;
    }
    .hd_thum01 iframe {
        width: 255px;
        height: 144px;
    }
    .hd_thum02 {
        bottom: 13%;
        left: 16%;
    }
}
@media (max-width: 920px) {
    .hd_thum01 {
        bottom: 31.5%;
    }
    .hd_thum01 iframe {
        width: 248px;
        height: 138px;
    }
    .hd_thum02 {
        bottom: 13.8%;
        left: 13%;
    }
}
@media (max-width: 900px) {
    .hd_thum01 {
        bottom: 31.85%;
    }
    .hd_thum01 iframe {
        width: 244px;
        height: 136px;
    }
    .hd_thum02 {
        bottom: 14%;
        left: 11%;
    }
}
@media (max-width: 880px) {
    .hd_thum01 {
        bottom: 32.3%;
        left: 17.5%;
    }
    .hd_thum01 iframe {
        width: 235px;
        height: 132px;
    }
}
@media (max-width: 860px) {
    .hd_thum01 {
        bottom: 32.8%;
    }
    .hd_thum01 iframe {
        width: 228px;
        height: 126px;
    }
    .hd_thum02 {
        bottom: 15.7%;
    }
}
@media (max-width: 840px) {
    .hd_thum01 {
        bottom: 33.1%;
    }
    .hd_thum02 {
        bottom: 16.4%;
    }
}
@media (max-width: 820px) {
    .hd_thum01 {
        bottom: 30.07%;
    }
    .hd_thum01 iframe {
        width: 209px;
        height: 118px;
    }
    .hd_thum02 {
        bottom: 10%;
        left: 8%;
    }
}
@media (max-width: 800px) {
    .hd_thum01 {
        bottom: 33.9%;
    }
    .hd_thum01 iframe {
        width: 214px;
        height: 120px;
    }
    .hd_thum02 {
        bottom: 17.7%;
    }
}
@media (max-width: 780px) {
    .hd_thum01 {
        bottom: 34.3%;
    }
    .hd_thum01 iframe {
        width: 209px;
    }
    .hd_thum02 {
        bottom: 18.5%;
    }
}
@media (max-width: 768px) {
    .hd_thum01 {
        bottom: 39.45%;
        left: 50%;
        transform: translateX(-50%);
    }
    .hd_thum01 iframe {
        width: 584px;
        height: 312px;
    }
    .hd_thum02 {
        bottom: 17%;
    }
    .hd_thum02 img {
        width: 80%;
    }
}
@media (max-width: 430px) {
    .hd_thum01 iframe {
        width: 320px;
        height: 180px;
    }
    .hd_thum02 {
        left: 18%;
    }
}
@media (max-width: 390px) {
    .hd_thum01 iframe {
        width: 290px;
        height: 163px;
    }
}