@charset "utf-8"; /* CSS Document */
/* 基本
------------------------------------------------------*/
body {
    font: 14px/22px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

img {
    display: inline-block;
    width: 100%;
    height: auto;
}

picture, source {
    display: block;
}

a:hover, #page-top:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    overflow-y: unset;
}

a {
    display: inline-block;
}

/****
test
****/
hr {
    border-top: 10px dashed deeppink;
    margin: 0;
    width: 99vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: none;
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

p.anchor {
    display: block;
    height: 0px;
}

.foot {
    font-size: 10px;
    padding-top: 2em;
    text-align: center;
}

.m-hoot a {
    padding: 0px 10px;
    font-size: 120%;
    line-height: 2.0em;
}

address {
    padding: 10px 0 10px;
    font-style: normal;
}

/* 全体幅調整
------------------------------------------------------*/
.wrap {
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
}

.wrap img {
    width: 100%;
    height: auto;
    vertical-align: top;
    margin-top: -0.1px;
}

/*　オファー
------------------------------------------------------*/
.offer_area {
    position: relative;
    display: flex;
    justify-content: center;
}

.cta_area {
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 1%;
    margin-left: 1.5%;
    width: 95%;
}

.cta_area li {
    width: 50%;
    display: inline-block;
}

.banner_area {
    display: flex;
    flex-wrap: wrap;
    padding: 5% 4%;
    column-gap: 2%;
    justify-content: center;
    margin-top: -2%;
}

.banner_area li {
    margin-top: 2%;
    width: 49%;
}

.btn_area {
    position: relative;
}

.btn_area .btn {
    position: absolute;
    bottom: -11%;
    right: 0%;
    z-index: 10;
    width: 27%;
}

.btn_area.fv .btn {
    bottom: 0.5%;
    right: 3%;
}

.btn_cart_big {
    position: absolute;
    bottom: 10%;
    width: 95%;
}

/**オファーボタン個別設定**/
.btn_recipe {
    position: absolute;
    bottom: 2%;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 69%;
}

.btn_cart_big1 {
    bottom: 6%;
    left: 2.5%;
    width: 96%;
}

.btn_cart_big2 {
    bottom: 2%;
    left: 3%;
}

.btn_cart_big3 {
    bottom: 4%;
    left: 3.5%;
}

.btn_cart_big4 {
    bottom: 7%;
    left: 3.5%;
}

.btn_cart_big5 {
    bottom: 5%;
    left: 3.5%;
}

.btn_cart_big6 {
    bottom: 7%;
    left: 3.5%;
}

.btn_cart_big7 {
    bottom: 6.3%;
    left: 3.5%;
}

/* offer_area個別設定（連番順に整理） */
.offer_area1 .cta_area {
    bottom: 6%;
}

.offer_area2 .cta_area {
    bottom: 7%;
}

.offer_area3 .cta_area {
    bottom: 6%;
}

.offer_area4 .cta_area {
    bottom: 8%;
    left: 60%;
    width: 35%;
}

.offer_area5 .cta_area {
    bottom: 5%;
}

.offer_area6 .cta_area {
    bottom: 4%;
}

.offer_area7 .cta_area {
    bottom: 19%;
}

.offer_area8 .cta_area {
    bottom: 10%;
}

.offer_area9 .cta_area {
    bottom: 4%;
}

.offer_area9_02 .cta_area {
    bottom: 8%;
}

.offer_area9_03 .cta_area {
    bottom: 4%;
}

.offer_area9_04 .cta_area {
    bottom: 8%;
}

.offer_area10 .cta_area {
    bottom: 4%;
}

.offer_area10_2 .cta_area {
    bottom: 4%;
}

.offer_area11 .cta_area {
    bottom: 8%;
}

.offer_area11_1 .cta_area {
    bottom: 8%;
}

.offer_area12 .cta_area {
    bottom: 4%;
}

.offer_area13 .cta_area {
    bottom: 8%;
}

.offer_area13_1 .cta_area {
    bottom: 8%;
}

.offer_area14 .cta_area {
    bottom: 1%;
}

.offer_area14_1 .cta_area {
    bottom: 2%;
}

.offer_area15 .cta_area {
    bottom: 4%;
}

.offer_area16 .cta_area {
    bottom: 4%;
}

.offer_area17 .cta_area {
    bottom: 4%;
}

.offer_area18 .cta_area {
    bottom: 3%;
}

.offer_area19 .cta_area {
    bottom: 3%;
}

.offer_area20 .cta_area {
    bottom: 4%;
}

.offer_area21 .cta_area {
    bottom: 3%;
}

.offer_area22 .cta_area {
    bottom: 7%;
}

.offer_area23 .cta_area {
    bottom: 4%;
}

.offer_area24 .cta_area {
    bottom: 4%;
}

.offer_area25 .cta_area {
    bottom: 5%;
}

.offer_area25_1 .cta_area {
    bottom: 5%;
}

.offer_area26 .cta_area {
    bottom: 4%;
}

.offer_area26_1 .cta_area {
    bottom: 1%;
}

.offer_area26_2 .cta_area {
    bottom: 2%;
}

.offer_area26_3 .cta_area {
    bottom: 2%;
}

.offer_area26_4 .cta_area {
    bottom: 2%;
}

.offer_area27 .cta_area {
    bottom: 12%;
}

.offer_area27_1 .cta_area {
    bottom: 7%;
}

.offer_area27_2 .cta_area {
    bottom: 1%;
}

.offer_area27_3 .cta_area {
    bottom: 5%;
}

.offer_area27_a {
    bottom: 1%;
}

.offer_area28 .cta_area {
    bottom: 2%;
}

.offer_area29 .cta_area {
    bottom: 6%;
}

.offer_area30 .cta_area {
    bottom: 1%;
}

.offer_area31 .cta_area {
    bottom: 6%;
}

.offer_area32 .cta_area {
    bottom: 4%;
}

.offer_area33 .cta_area {
    bottom: 6%;
}

.offer_area33_1 .cta_area {
    bottom: 6%;
}

.offer_area34 .cta_area {
    bottom: 1%;
}

.offer_area35 .cta_area {
    bottom: 6%;
}

.offer_area35_1 .cta_area {
    bottom: 6%;
}

.offer_area36 .cta_area {
    bottom: 3%;
}

.offer_area37 .cta_area {
    bottom: 1%;
}

.offer_area38 .cta_area {
    bottom: 6%;
}

.offer_area38_1 .cta_area {
    bottom: 1%;
}

.offer_area39 .cta_area {
    bottom: 6%;
}

/*　Accordion
------------------------------------------------------*/
.wrap_accordion {
    /* text-align: center; */
    margin-top: -4%;
}

.wrap_accordion dl {
    width: 93%;
    max-width: 712px;
    margin: 5% auto;
}

.wrap_accordion dt, .wrap_accordion dd, .wrap_accordion img {
    display: inline-block;
}

.wrap_accordion dt .accordion_ttl_on {
    display: none;
}

.wrap_accordion dt.accordion_on .accordion_ttl_on {
    display: inline-block;
}

.wrap_accordion dt.accordion_on .accordion_ttl_off {
    display: none;
}

.wrap_accordion dt {
    cursor: pointer;
    /* margin-bottom: 3.9%; */
}

.wrap_accordion dd {
    margin-bottom: 2%;
}

.wrap_accordion dd + dt {
    margin-top: 2%;
}

.wrap_accordion dd {
    display: flex;
    justify-content: center;
}

.wrap_accordion dd {
    /* display: flex;
    justify-content: center;
    flex-wrap: wrap; */
    display: block;
    width: 100%;
    overflow: hidden;
}

.wrap_accordion dd a {
    width: 50%;
    display: block;
    margin: 0;
    float: left;
}

/*スクラッチ
------------------------------------------------------*/
.wrap_scratch {
    position: relative;
    display: flex;
    justify-content: center;
}

.wrap_scratch .wrap_scratchpad {
    /* height: 29%; */
    /**safari**/
    height: auto;
    /**safari**/
    /*ここから*/
    position: absolute;
    /* left: 2%; */
    /* width: 44.9%; */
    width: 33.6%;
    top: 55.5%;
    aspect-ratio: 1 / 1;
    /*ここまで*/
}

.wrap_scratch .wrap_scratchpad .scratchpad {
    /*ここから*/
    width: 100%;
    aspect-ratio: 1 / 1;
    /*ここまで*/
}

.wrap_scratch .wrap_scratchpad .scratchpad canvas {
    border-radius: 50%;
}

/**mac safariのみaspectretio効かないため対策**/
.wrap_scratch.macOS .wrap_scratchpad {
    height: 63%;
    /* bottom: -17%; */
    height: 39%;
    /**test*/
}

.wrap_scratch.macOS .wrap_scratchpad .scratchpad {
    height: 100% !important;
}

.accordion_congratulations {
    padding: 5% 0;
    display: flex;
    justify-content: center;
}

/**v1
.btn_cart_scratch {
    position: absolute;
    bottom: 500%;
    width:47.5%;
}
.btn_cart_scratch.changed {
    bottom: 35%;
}
**/
/**スクラッチv2追記**/
.scratch_accordion {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* height: 0.01%; */
    /* transition: all ease 0.5s; */
    display: none;
    padding: 2% 0 0%;
}

.btn_cart_scratch {
    /* position: absolute; */
    /* bottom: 5%; */
    width: 47.5%;
    margin: 0 auto;
    display: block;
}

.scratch_accordion.open {
    /* height: 20%; */
}

/**スライダー追加**/
.slider {
    margin-top: 5%;
    margin-bottom: 5%;
}

.fixedcart {
    position: fixed;
    top: calc(( 180 / 1000) * 100vh);
    right: 0;
    z-index: 10;
    /* width: 8%; */
    display: inline-block;
}

/**商品一覧を見るボタン**/
.fixedlist {
    position: fixed;
    top: 0%;
    right: 0%;
    cursor: pointer;
    z-index: 9999;
}

/**ハンバーガーメニュー**/
.menu_overlay {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
}

/*追従バナーCSS
------------------------------------------------------*/
.follow {
    background-color: #FFF;
    /* height: 100px; */
    max-width: 768px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 9999;
}

.acmenu dd.follow_menu {
    position: absolute;
    bottom: 100%;
    background: #FFF;
    /* padding: 5% 3% 1%; */
    width: 100%;
}

.acmenu dd.follow_menu .banner_area {
    /* column-gap: 3%; */
    /* padding-top: 8%; */
}

.acmenu dd.follow_menu .banner_area li {
    width: 49%;
}

.fluffy {
    animation: fluffyY 1s infinite ease-out;
}

@keyframes fluffyY {
    0% {
        transform: translateY(7px);
    }

    50% {
        transform: translateY(-7px);
    }

    100% {
        transform: translateY(7px);
    }
}

   .wrap_accordion2 {
        margin: 0 auto;
        width: 600px;
    }

@media screen and (max-width: 768px) {
    .fixedcart {
        width: 22%;
        top: 17%;
    }

    .fixedlist {
        width: 22%;
    }

    .wrap_accordion2 {
        margin-top: 26%;
        margin: 26% auto;
        width: 90%;
    }
}

/**@end**/
@media screen and (max-width: 480px) {
    .banner_area {
        padding: 5% 3%;
    }

    .fixedcart {
        top: 15%;
    }
}

/**@end**/
@media (min-width: 751px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

/**@end**/