@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.2px;
}
/**ページ最後の余白用画像は非表示**/
.img_last {
    display: none;
}

/*　オファー
------------------------------------------------------*/
.offer_area {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.cta_area {
    position: absolute;
    display: flex;
    justify-content: center;
    /* bottom: 3.5%; */
    /* margin-left: 2.5%; */
    width: 95%;
    width: 82%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 11%; /* これは .offer_area の幅基準で計算される */
}
/**ページ最後は余白多いため調整**/
.last_offer + .cta_area {
    margin-bottom: 19%;
}
.lp03 .last_offer + .cta_area {
    margin-bottom: 17%;
}
.lp04 .last_offer + .cta_area {
    margin-bottom: 17%;
}

/**オファー1段目の下部マージン調整**/
.set_offer + .cta_area {
    margin-bottom: 7%;
}


.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((618 / 768) * 100%);
    /* margin-left: 1%; */
    margin: 0 auto;
    bottom: 0;
    margin-bottom: 11%; /* これは .offer_area の幅基準で計算される */
}
.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_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%);
}

.offer_area_select_2-3_07 .btn_cart_select {
margin-bottom: 6%;
}
.offer_area_select_2-3_08 .btn_cart_select {
margin-bottom: 19%;
}
.offer_area5-2_05 .set_offer + .cta_area {
    margin-bottom: 11%;
}

.offer_area3-2_03 .set_offer + .cta_area {
    margin-bottom: 11%;
}

.offer_area_select_4-2_01 .btn_cart_select {
    margin-bottom: 7%;
}
.offer_area5-2_05 .set_offer + .cta_area {
    margin-bottom: 11%;
}
.offer_area5-3_01 .cta_area {
    margin-bottom: 7%;
}
.offer_area5-3_07 .cta_area {
    margin-bottom: 15%;
}


/*　Accordion
------------------------------------------------------*/
.wrap_accordion {
    /* text-align: center; */
}
.wrap_accordion dl {
    width: 93%;
    width: 50%;
    /* max-width: 712px; */
    max-width: 530px;
    max-width: 390px;
    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;
    background-color: #e74382;
    padding: 2% 0;
}
.wrap_accordion_tmp dl {
    /* position: absolute; */
    width: 90%;
    max-width: 688px;
    margin: 0 auto;
    top: 2%;
    left: 0%;
    right: 0%;
}
.wrap_accordion_tmp dt {
    cursor: unset;
}
.wrap_accordion_tmp dd {
    margin-bottom: unset;
}

/**202602ver**/
.wrap_accordion2 {
    background-color: unset;
    padding: unset;
}

/**TMP202602**/
.wrap_accordion_tmp_hmenu {

}
.wrap_accordion_tmp_hmenu dl {
    width: 93%;
    width: 70%;
    max-width: 530px;
    max-width: 390px;
    margin:  2% auto;
}



/*　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   20260217
------------------------------------------------------*/
.wrap_otherlink_tmp {
    position: relative;
}
.wrap_otherlink_tmp ul {
    position: absolute;
    width: 90%;
    max-width: 688px;
    margin: 0 auto;
    /* top: 12%; */
    top: 14%;
    left: 0%;
    right: 0%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wrap_otherlink_tmp ul li {
    margin-bottom: 4%;
    width: 48%;
}
.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;
}

/**20251203.紙吹雪**/
.wrap_canvas {
    position: relative;
}
#canvas {
    position: absolute;
    width: 100%;
    height: 1%;
    max-height: 650px;
    min-height: 450px;
}

/*追従バナー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*/
    }
    /**TMP202602**/
    .wrap_accordion_tmp_hmenu {
        margin-top: 17%;
    }

    .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**/