/* ============================================
   共通CSS（モバイルファースト / ブレークポイント: 786px）
   ============================================ */

/* ============================================
   ★ CPN ページ ★
   ============================================ */
/* 基本 */
:root {
  --cpn-mainClr: #FF7F0B;
  --cpn-subClr: #FFE32E;
}

.cp-cmn--bg_mainClr {
    background-color: var(--cpn-mainClr);
}
.cp-cmn--bg_subClr {
    background-color: var(--cpn-subClr);
}
.cp-cmn--fontFam01 {
    font-family: Noto Sans JP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 900;
}
.cp-cmn--font_mainClr {
    color: var(--cpn-mainClr);
}
.cp-cmn--font_subClr {
    color: var(--cpn-subClr);
}

/* 背景画像 */
.cp-cmn--bgimg01 {
    background-image: url("//image.piary.jp/uploads/cpn/common/bg_s_left.webp"), url("//image.piary.jp/uploads/cpn/common/bg_s_right.webp"); /* 小さめ */
}
.cp-cmn--bgimg02 {
    background-image: url("//image.piary.jp/uploads/cpn/common/bg_l_left.webp"), url("//image.piary.jp/uploads/cpn/common/bg_l_right.webp"); /* 大きめ */
}
.cp-cmn--bgimg01,
.cp-cmn--bgimg02 {
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: 30%, 30%; /* SP */
}

/* ナビ */
.cp-cmn--nav {
    width: min(92.5%, 540px);
    margin-inline: auto;
}
.cp-cmn--nav-link {
    background-color: var(--cpn-subClr);
    display: grid;
    border-radius: 10px;
    padding-block: 1rem 2rem; /* SP */
    place-content: center;
    min-height: 62px; /* SP */
    position: relative;
    line-height: 1.2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.cp-cmn--nav-link::after {
    color: var(--cpn-mainClr);
    position: absolute;
    content: "";
    width: 10px; /* SP */
    height: 10px; /* SP */
    border-inline-end: 1px solid;
    border-block-end: 1px solid;
    margin-inline: auto;
    inset-block-end: 1rem; /* SP */
    inset-inline: 0;
    rotate: 45deg;
}

/* 見出し */
.cp-cmn--hd01__subtitle {
    background-color: var(--cpn-mainClr);
    color: var(--cpn-subClr);
    font-weight: bold;
    padding: 0.25rem 1rem;
    width: fit-content;
    margin-inline: auto;
    /* font-size: SPはデフォルト継承 */
}
.cp-cmn--hd01__fos {
    font-size: 2.4rem; /* SP */
}

/* FIXボタン */
.cp-cmn--fixBtn {
    position: fixed;
    bottom: 60px; /* SP */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    padding: 1rem 2rem; /* SP */
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.3s, visibility 0.3s;
}
.cp-cmn--fixBtn__inr {
    color: var(--cpn-mainClr);
    border: 2px solid var(--cpn-mainClr);
    margin: 0 auto;
}
.cp-cmn--fixBtn.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*フッター*/
.cp-cmn--end {
    max-width: 750px;
}
.cp-cmn--end_balloon {
    position: relative;
    display: inline-block;
    background-color: #fff;
    color: var(--cpn-mainClr);
    border-radius: 50px;
    padding: 15px 30px;
    text-align: center;
}
.cp-cmn--end_balloon::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
    font-size: 1.4rem;
}

/* ============================================
   ★ CPN期間 上下アニメ吹き出し ★
   ============================================ */
.cpn-limit__txt {
    padding: .8rem 0 .8rem 3rem;
    border-radius: 10px;
    position: relative;
    animation: updown 2s infinite linear;
    background-color: var(--cpn-mainClr);
    font-size: 1.4rem;
}
@keyframes updown {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20%)
    }
}
.cpn-limit__txt::before,
.cpn-limit__txt::after {
    content: "";
    position: absolute;
}
.cpn-limit__txt::before {
    width: 2.5em;
    height: 2.5em;
    background-image: url(//image.piary.jp/uploads/photobook/icon_megaphon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: calc(50% - 10.5em);
    transform: translateY(-50%);
}
.cpn-limit__txt::after {
    width: 2em;
    height: 1em;
    background-color: #bc0009;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    left: 50%;
    bottom: -.9em;
    transform: translateX(-50%);
}

/* ============================================
   ★ 商品画像下帯 ★
   ============================================ */
@keyframes flash_cpn {
    0%,
    70% {
        opacity: 1;
    }
    100% {
        opacity: .4;
    }
}
.is-cpn-beauty .slide-item__inner::after,
.is-cpn-beauty .u-posRel::after,
.is-cpn-gift .slide-item__inner::after,
.is-cpn-gift .u-posRel::after,
.is-cpn-invitation .slide-item__inner::after,
.is-cpn-invitation .u-posRel::after,
.c-itemModalInfo .is-cpn-invitation::after,
.is-cpn-movie .slide-item__inner::after,
.is-cpn-movie .u-posRel::after,
.is-cpn-parentsgift .slide-item__inner::after,
.is-cpn-parentsgift .u-posRel::after,
.is-cpn-petitgift50 .slide-item__inner::after,
.is-cpn-petitgift50 .u-posRel::after,
.is-cpn-prize .slide-item__inner::after,
.is-cpn-prize .u-posRel::after,
.is-cpn-reception .slide-item__inner::after,
.is-cpn-reception .u-posRel::after,
.is-cpn-tapestry .slide-item__inner::after,
.is-cpn-tapestry .u-posRel::after,
.is-cpn-webcard .slide-item__inner::after,
.is-cpn-webcard .u-posRel::after,
.is-cpn-weddinggift .slide-item__inner::after,
.is-cpn-weddinggift .u-posRel::after,
.is-cpn-welcome .slide-item__inner::after,
.is-cpn-welcome .u-posRel::after,
.is-cpn-tmv .slide-item__inner::after,
.is-cpn-tmv .u-posRel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 17%;
    animation: 2s ease-in-out infinite alternate flash_cpn;
}
.is-cpn-beauty .slide-item__inner,
.is-cpn-beauty .u-posRel,
.is-cpn-gift .slide-item__inner,
.is-cpn-gift .u-posRel,
.is-cpn-invitation .slide-item__inner,
.is-cpn-invitation .u-posRel,
.is-cpn-movie .slide-item__inner,
.is-cpn-movie .u-posRel,
.is-cpn-parentsgift .slide-item__inner,
.is-cpn-parentsgift .u-posRel,
.is-cpn-petitgift50 .slide-item__inner,
.is-cpn-petitgift50 .u-posRel,
.is-cpn-prize .slide-item__inner,
.is-cpn-prize .u-posRel,
.is-cpn-reception .slide-item__inner,
.is-cpn-reception .u-posRel,
.is-cpn-tapestry .slide-item__inner,
.is-cpn-tapestry .u-posRel,
.is-cpn-webcard .slide-item__inner,
.is-cpn-webcard .u-posRel,
.is-cpn-weddinggift .slide-item__inner,
.is-cpn-weddinggift .u-posRel,
.is-cpn-welcome .slide-item__inner,
.is-cpn-welcome .u-posRel,
.is-cpn-tmv .slide-item__inner,
.is-cpn-tmv .u-posRel,
.is-cpn-escortcard .slide-item__inner::after,
.is-cpn-escortcard .u-posRel::after {
    padding-bottom: 16%;
}
.c-itemModalInfo .is-cpn-invitation {
    padding-bottom: 5%;
}
.is-cpn-prize .slide-item__inner::after,
.is-cpn-prize .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_prize.webp) center top/100% no-repeat;
}
.is-cpn-weddinggift .slide-item__inner::after,
.is-cpn-weddinggift .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_weddinggift.webp) center top/100% no-repeat;
}
.is-cpn-movie .slide-item__inner::after,
.is-cpn-movie .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_movie.webp) center top/100% no-repeat;
}
.is-cpn-petitgift50 .slide-item__inner::after,
.is-cpn-petitgift50 .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_petitgift.webp) center top/100% no-repeat;
}
.is-cpn-webcard .slide-item__inner::after,
.is-cpn-webcard .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_webcard.webp) center top/100% no-repeat;
}
.is-cpn-parentsgift .slide-item__inner::after,
.is-cpn-parentsgift .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_parentsgift.webp) center top/100% no-repeat;
}
.is-cpn-beauty .slide-item__inner::after,
.is-cpn-beauty .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_beauty.webp) center top/100% no-repeat;
}
.is-cpn-gift .slide-item__inner::after,
.is-cpn-gift .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_gift.webp) center top/100% no-repeat;
}
.is-cpn-welcome .slide-item__inner::after,
.is-cpn-welcome .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_welcomeboard.webp) center top/100% no-repeat;
}
.is-cpn-tapestry .slide-item__inner::after,
.is-cpn-tapestry .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_welcometapestry.webp) center top/100% no-repeat;
}
.is-cpn-invitation .slide-item__inner::after,
.is-cpn-invitation .u-posRel::after,
.c-itemModalInfo .is-cpn-invitation::after {
    background: url(//image.piary.jp/uploads/frame/frame_invitation.webp) center top/100% no-repeat;
}
.is-cpn-reception .slide-item__inner::after,
.is-cpn-reception .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_reception.webp) center top/100% no-repeat;
}
.is-cpn-escortcard .slide-item__inner::after,
.is-cpn-escortcard .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_escortcard.webp) center top/100% no-repeat;
}
.is-cpn-tmv .slide-item__inner::after,
.is-cpn-tmv .u-posRel::after {
    background: url(//image.piary.jp/uploads/frame/frame_movie_gisaku.webp) center top/100% no-repeat;
}

/* ============================================
   ★ スライダー下 ピックアップ商品 ★
   ============================================ */
.cpn-retain {
    border: 2px solid #d81b34;
    width: 95%;
}
.cpn-retain__btn {
    width: 75%;
}
.cpn-retain__btn,
.cpn-retain__ttl {
    background-color: #d81b34;
}
.cpn-retain .cpn-retaine_itemList {
    padding: 0 1rem;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    column-gap: .8rem;
    scrollbar-width: none;
}
.cpn-retaine_itemList .c-itemList__item img {
    overflow: hidden;
    border: none;
}
.cpn-retaine_itemList .c-itemList__item .u-flxMid {
    justify-content: space-between;
}
.cpn-retaine_itemList .c-itemList__item .c-itemPrice__perOff {
    order: 2;
    background-color: #f5481d;
}
.cpn-retaine_itemList .c-itemList__item .c-itemList__itemprice {
    order: 1;
    color: #333 !important;
    font-weight: 700;
}
.cpn-retaine_itemList .c-itemList__item .c-favReg__favorite,
.cpn-retaine_itemList .c-itemPrice__perOff,
.cpn-retaine_itemList .c-yotpoReviewList__stars {
    display: none !important;
}
.cpn-retaine_itemList .c-itemList__item {
    flex-shrink: 0;
    padding-top: 0 !important;
    width: 33vw;
}

/* ============================================
   ★ カート内装飾 ★
   ============================================ */
.c-form__radio .c-cpm--couponcode{
    background: transparent linear-gradient(105deg, #d4000c 0%, #800005 100%); 
}

/* ============================================
   ▼ PC（786px以上） ▼
   ============================================ */
@media (min-width: 786px) {

    /* ============================================
    ★ CPN ページ ★
    ============================================ */
    /* 背景画像 */
    .cp-cmn--bgimg01,
    .cp-cmn--bgimg02 {
        background-size: 25%, 25%;
    }

    /* ナビ */
    .cp-cmn--nav-link {
        padding-block: 1.5rem 2.5rem;
        min-height: 90px;
    }
    .cp-cmn--nav-link::after {
        width: 12px;
        height: 12px;
        inset-block-end: 1.25rem;
    }

    /* 見出し */
    .cp-cmn--hd01__subtitle {
        font-size: 1.6rem;
    }
    .cp-cmn--hd01__fos {
        font-size: 3rem;
    }

    /* FIXボタン */
    .cp-cmn--fixBtn {
        bottom: 0;
        padding: 1.5rem 0;
    }
    .cp-cmn--fixBtn__inr {
        width: 25%;
        font-size: revert;
        padding: revert;
        font-size: 1.6rem;
        padding: 1.5rem 0;
    }

    /*フッター*/
    .cp-cmn--end {
        width: 40%;
    }
    .cp-cmn--end_balloon {
        font-size: 2rem;
    }

    /* ============================================
   ★ CPN期間 上下アニメ吹き出し ★
   ============================================ */
    .cpn-limit__txt { 
        font-size: 2rem;
    }

    /* ============================================
    ★ スライダー下 ピックアップ商品 ★
    ============================================ */
    .cpn-retain {
        width: 960px;
    }
    .cpn-retain__btn {
        width: 55%;
        margin-top: 1rem;
    }
    .cpn-retaine_itemList .c-itemList__item {
        width: 160px;
    }
    .cpn-retain .cpn-retaine_itemList {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

}