@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;
    margin-top: -0.1px;
}
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 orange;
    background: #000;
    margin: 0;
    width: 99vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: none;
}
body.test hr {
    display: block;
}
body.test .sourceview {
    outline: 10px dashed red;
    display: none;
}
body.test .offerimg {
    opacity: 0.6;
    outline: 10px dashed deeppink;
}

#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;
    flex-direction: column;
}
.cta_area {
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 5%;
    /* bottom: 4%; */
    margin-left: 2.5%;
    width: 95%;
}
.cta_area li {
    /* width: 50%; */
    width: 49%;
    display: inline-block;
}
.offer_area_select {
    position: relative;
    display: flex;
    justify-content: center;
}
.offer_area_teiki {
    position: relative;
    display: flex;
    justify-content: center;
}
.offer_area_tanpin .cta_area {
    bottom: 11%;
}
.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;
    display: flex;
    justify-content: center;
}
.btn_area .btn {
    position: absolute;
    bottom: 0%;
    z-index: 10;
    width: calc((530 / 768) * 100%);
}
.btn_area.fv .btn {
    bottom: 0.5%;
    right: 3%;
}
.btn_cart_select {
    position: absolute;
    bottom: 5%;
    /* width: 97%; */
    width: calc((737 / 768) * 100%);
    margin-left: 1%;
}
.link_area_spam {
    position: relative;
}
.link_area_spam .btn_link {
    position: absolute;
    width: 31.6%;
    right: 1%;
    bottom: 0%;
}

.offer_area_col2 {
    position: relative;
}
.offer_area_col2 .cta_area1 {
    position: absolute;
    bottom: 2%;
    left: 3%;
    margin-left: -1.5%;
    width: 48%;
}
.offer_area_col2 .cta_area2 {
    position: absolute;
    bottom: 2%;
    right: 0%;
    width: 48%;
}

.offer_area_col2_mame  .cta_area1,
.offer_area_col2_mame  .cta_area2 {
    bottom: 5%;
}


/**オファーボタン個別設定**/
.offer_area_03_06 .cta_area {
    bottom: 8%;
}

.offer_area_select_09_02 .btn_cart_select,
.offer_area_select_09_06 .btn_cart_select
 {
    bottom:5%;
}

.offer_area_teiki .btn_cart_teiki {
    position: absolute;
    bottom: 8%;
}

.wrap_link_recipe {
    position: relative;
}
.wrap_link_recipe .btn_link_recipe {
    position: absolute;
    bottom: 1.5%;
    left: 3%;
    width: calc((356 / 768) * 100%);
}

/**202512専用**/
.lp202512 .offer_area {
    flex-direction: column;
    align-items: center;
}
.lp202512 .offer_area .btn_kounyu00 {
    position: absolute;
    bottom: 5%;
    width: calc((628/768)*100%);
}

/**lp01**/
.lp01 .offer_area4 .btn_kounyu00_1 {
    bottom: 42%;
}
.lp01 .offer_area4 .btn_kounyu00_2 {
    bottom: 24%;
}
.lp01 .offer_area4 .btn_kounyu00_3 {
    bottom: 6.5%;
}

/**lp02**/
.lp02 .offer_area1 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp02 .offer_area1 .btn_kounyu00_2 {
    bottom: 3%;
}

.lp02 .offer_area2 .btn_kounyu00_1 {
    bottom: 28%;
}
.lp02 .offer_area2 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp02 .offer_area3 .btn_kounyu00_1 {
    bottom: 28%;
}
.lp02 .offer_area3 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp02 .offer_area4 .btn_kounyu00_1 {
    bottom: 28%;
}
.lp02 .offer_area4 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp02 .offer_area5 .btn_kounyu00_1 {
    bottom: 31%;
}
.lp02 .offer_area5 .btn_kounyu00_2 {
    bottom: 7%;
}

/**lp03**/
.lp03 .offer_area1 .btn_kounyu00_1 {
    bottom: 23%;
}
.lp03 .offer_area1 .btn_kounyu00_2 {
    bottom: 4%;
}
.lp03 .offer_area2 .btn_kounyu00_1 {
    bottom: 27%;
}
.lp03 .offer_area2 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp03 .offer_area3 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp03 .offer_area3 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp03 .offer_area4 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp03 .offer_area4 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp03 .offer_area5 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp03 .offer_area5 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp03 .offer_area6 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp03 .offer_area6 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp03 .offer_area7 .btn_kounyu00_1 {
    bottom: 25%;
}
.lp03 .offer_area7 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp03 .offer_area8 .btn_kounyu00_1 {
    bottom: 28%;
}
.lp03 .offer_area8 .btn_kounyu00_2 {
    bottom: 7%;
}

/**lp04**/
.lp04 .offer_area2 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp04 .offer_area2 .btn_kounyu00_2 {
    bottom: 5%;
}

.lp04 .offer_area3 .btn_kounyu00_1 {
    bottom: 25%;
}
.lp04 .offer_area3 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp04 .offer_area4 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp04 .offer_area4 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp04 .offer_area5 .btn_kounyu00_1 {
    bottom: 28%;
}
.lp04 .offer_area5 .btn_kounyu00_2 {
    bottom: 7%;
}

/**lp05**/
.lp05 .offer_area1 .btn_kounyu00_1 {
    bottom: 24%;
}
.lp05 .offer_area1 .btn_kounyu00_2 {
    bottom: 3%;
}

.lp05 .offer_area2 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp05 .offer_area2 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp05 .offer_area4 .btn_kounyu00_1 {
    bottom: 26%;
}
.lp05 .offer_area4 .btn_kounyu00_2 {
    bottom: 4%;
}

.lp05 .offer_area5 .btn_kounyu00_1 {
    bottom: 29%;
}
.lp05 .offer_area5 .btn_kounyu00_2 {
    bottom: 8%;
}
.lp05 .offer_area5 .btn_link_recipe {
    position: absolute;
    top: 37%;
    right: 14%;
    width: calc((145/768)*100%);
}

/**最後の余白用背景**/
.lp202512 .img_last {
    display: none;
}

/*　Accordion
------------------------------------------------------*/
.wrap_accordion {
    /* text-align: center; */
}
.wrap_accordion dl {
    width: 93%;
    /* max-width: 712px; */
    max-width: 530px;
    margin:  4% 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;
    flex-wrap: wrap; */
    display: block;
    width: 100%;
    overflow: hidden;
}
.wrap_accordion dd a {
    width: 50%;
    display: block;
    margin: 0;
    float: left;
    background: #fff;
}
.wrap_accordion dd.colx1 a {
    width: 100%;
}
/**test
.wrap_accordion dd {
    display: block;
    max-height: 0;
    transition: 1000ms height ease;
}
.wrap_accordion dd.accordion_on {
    max-height: 200px;
}
**/

/*　Accordion TMP20251118
------------------------------------------------------*/
.wrap_accordion_tmp {
    position: relative;
}
.wrap_accordion_tmp dl {
    position: absolute;
    width: 89%;
    max-width: 688px;
    margin: 0 auto;
    top: 15%;
    left: 0%;
    right: 0%;
}
.wrap_accordion_tmp dt {
    cursor: unset;
}

/*　U-komi
------------------------------------------------------*/
.wrap_ukomi {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 530px;
}
.wrap_ukomi .review-container {
    position: absolute;
    top: 0%;
    background: #fff;
    width: 89.5%;
    margin-top: -0.1px;
}
.wrap_ukomi .review-container .ukomiSwipeSlide.reviewSliderWidget .swiper {
    /* border: 5px dashed red; */
    height: 300px;
    overflow-y: scroll;
}

/**mac safari 表示されない対応**/
.wrap_ukomi .review-container .ukomiSwipeSlide.reviewSliderWidget .swiper::-webkit-scrollbar {
    display: block;
    width: 8px;
}
.wrap_ukomi .review-container .ukomiSwipeSlide.reviewSliderWidget .swiper::-webkit-scrollbar-track-piece {
    background-color: #fff; /* Safari スクロールバーの背景色 */
}
.wrap_ukomi .review-container .ukomiSwipeSlide.reviewSliderWidget .swiper::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Safari スクロールバーのつまみの色 */
    border-radius: 10px;
    background-clip: content-box;
}


/*　otherlink TMP20251118
------------------------------------------------------*/
.wrap_otherlink_tmp {
    position: relative;
}
.wrap_otherlink_tmp ul {
    position: absolute;
    width: 89%;
    max-width: 688px;
    margin: 0 auto;
    /* top: 12%; */
    top: 20%;
    left: 0%;
    right: 0%;
}
.wrap_otherlink_tmp ul li {
    margin-bottom: 5%;
}
.lp01 .wrap_otherlink_tmp .otherlink01 {
    display: none;
}
.lp02 .wrap_otherlink_tmp .otherlink02 {
    display: none;
}
.lp03 .wrap_otherlink_tmp .otherlink03 {
    display: none;
}
.lp04 .wrap_otherlink_tmp .otherlink04 {
    display: none;
}
.lp05 .wrap_otherlink_tmp .otherlink05 {
    display: none;
}

/* swiper
------------------------------------------------------*/
.swiper-container {
    position: relative;
    width: 100%;
}
.swiper-container .swiper-wrapper {
    position: absolute;
    width: 100%;
    top: 32%;
    height: auto;
}
.swiper-slide {
    /* width: 80%; */
}
/* 前へ次への矢印カスタマイズ */
.swiper-container .swiper-button-prev::after,
.swiper-container .swiper-button-next::after {
    bottom: 0;
    content: "";
    height: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 0;

}
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev {
    background-image: unset;
    width: 8%;
    height: auto;
}
.swiper-container.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 27%;
}
.swiper-container .swiper-pagination-bullet {
    border-radius: unset;
    width: 7%;
    height: 10px;
}
.swiper-container .swiper-pagination-bullet-active {
    background: #666;
}


/*　Accordion 漫画
------------------------------------------------------*/
.ab9_acc dt .accordion_ttl_on {
    display: none;
}
.ab9_acc dt.accordion_on .accordion_ttl_on {
    display: inline-block;
}
.ab9_acc dt.accordion_on .accordion_ttl_off {
    display: none;
}
.acc_cursor {
    cursor: pointer;
}



/*スクラッチ
------------------------------------------------------*/
.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: 33%;
    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%;
    
}
.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);
    top: /**23%;**/140px;
    right: 0;
    z-index: 10;
    /* width: 8%; */
    display: inline-block;
}

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

/**TOPへ戻る**/
.btn_totop {
    position: fixed;
    bottom: 5%;
    bottom: 9%;
    right: 2%;
    width: 6%;
    height: auto;
    max-width: 154px;
    min-width: 66px;
    z-index: 10;
    will-change: transform;
    height: 10svh;
    display: none;
}
.fixedtel {
    position: fixed;
    top: 2%;
    right: 2%;
    cursor: pointer;
    z-index: 9999;
    width: 32%;
    display: none;
}


/**ハンバーガーメニュー**/
.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;
}

/**アコーディオンwrap_accordion_2502okitoku02**/
.wrap_accordion_2502okitoku02 dt {
    cursor: pointer;
}
.wrap_accordion_2502okitoku02 dt .accordion_ttl_on {
    display: none;
}
.wrap_accordion_2502okitoku02 dt .accordion_ttl_off {
    display: inline-block;
}
.wrap_accordion_2502okitoku02 dt.accordion_on .accordion_ttl_on {
    display: inline-block;
}
.wrap_accordion_2502okitoku02 dt.accordion_on .accordion_ttl_off {
    display: none;
}


/*追従バナー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);
    }
}

@media screen and (max-width:768px) {
    .fixedcart {
        width: 22%;
        width: 17vw;
        top: 17%;
        top: 18vw;
    }
    .fixedlist {
        width: 22%;
        width: 16vw;
    }
    .wrap_accordion2 {
        margin-top: 26%;
        margin-top: 20%;
    }
    /**中身が6段ある場合見切れるため対策**/
    .wrap_accordion dl {
        /* width: 78%; 20251120TMPOFF*/
    }

    .wrap_ukomi .review-container .ukomiSwipeSlide.reviewSliderWidget .swiper {
        height: 280px;
    }
    /**TOPへ戻る**/
    .btn_totop {
        bottom: 9%;
    }


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

    .offer_area em {
        font-size: 8px;
        margin-left: 7%;
    }
}/**@end**/

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

}/**@end**/