@charset "utf-8";
/**************************
    CDMP Elements
    Author:  MonotaRO
    setting: device > place > banner
**************************/

/* Variables */
.CDMPBanner,
.cdmpSelection {
    --banner-theme-color: #2f4fb7;
}

/* -------------------------------------
    PC & Tablet
------------------------------------- */

/* 共通設定 */
@media screen and (hover: hover) and (pointer: fine),
screen and (min-width: 741px) {
    .Section--CDMP {
        margin: 24px auto;
        padding-top: 24px;
        border-top: 1px solid #f1f1f1;
    }
    .Header--CDMP {
        padding-bottom: 16px;
        font-size: 22px;
        font-weight: normal;
        line-height: 1.3;
        text-align: left;
    }
    .CDMPBanner,
    .CDMPBanner__List {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .CDMPBanner {
        display: flex;
        padding: 10px 43px;
    }
    .CDMPBanner__List {
        margin-right: clamp(4px, 1%, 16px);
    }
    _:-ms-lang(x)::-ms-backdrop,/* ie11 */
    .CDMPBanner__List {
        margin-right: 1%;
    }
    .CDMPBanner__Anchor {
        display: block;
        width: 222px;
        height: 94px;
        background: #fff;
    }
    .CDMPBanner__Anchor:hover {
        opacity: .7;
    }

    #page_product .Section--CDMP,
    #page_item .Section--CDMP {
        margin: 0;
        padding: 0 0 8px 0;
    }
    #page_product .Header--CDMP,
    #page_item .Header--CDMP {
        display: none;
    }
    #page_product .Section--CDMP ul,
    #page_item .Section--CDMP ul {
        padding: 0;
    }
    #page_product .Section--CDMP li,
    #page_item .Section--CDMP li {
        list-style-type: none;
    }
    #page_product .Section--CDMP li img,
    #page_item .Section--CDMP li img {
        width: 216px;
        height: auto;
    }
    #page_product .Section--CDMP li,
    #page_item .Section--CDMP li {
        display: none;
    }
    #page_product .Section--CDMP li:first-child,
    #page_item .Section--CDMP li:first-child {
        display: block;
    }
}
@media screen and (max-width: 1190px) {
    .CDMPBanner__List {
        margin-right: 4px;
    }
}

/* -------------------------------------
    SP
------------------------------------- */
@media screen and (max-width: 740px) and (hover: none) and (pointer: coarse) {
    .Section--CDMP {
        position: relative;
    }
    .CDMPBanner,
    .CDMPBanner__List {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .CDMPBanner {
        display: flex;
    }
    .CDMPBanner__List {
        margin-right: 8px;
    }
    .CDMPBanner__Anchor {
        display: block;
        width: 222px;
        height: 94px;
        background: #fff;
    }
}

/* トップページ
------------------------------------- */
#cdmpTOP-1 {
    .Section--CDMP {
        margin-top: 24px;
        margin-bottom: 24px;
        padding-top: 24px;
        border-top: 1px solid #f1f1f1;
        .CDMPBanner__Anchor {
            position: relative;
            overflow: hidden;
            background-color: var(--banner-theme-color);
            border: 1px solid var(--banner-theme-color);
            img {
                position: absolute;
                vertical-align: top;
            }
        }
    }

    .Section--500off {
        overflow: hidden;
        position: relative;
        height: 120px;
        margin-bottom: 32px;
        padding: 0;
        background: url(//jp.images-monotaro.com/img/common/cdmp/bg_500coupon.png) repeat-x center top;
        line-height: 1;
    }
    .cdmp500off {
        position: absolute;
        display: table;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .cdmp500off__wrapper {
        position: relative;
        padding-top: 72px;
        display: table;
        width: 446px;
        margin: auto;
        color: #fff;
    }
    .cdmp500off__contents {
        display: table;
        margin: 0 auto;
        text-align: center;
    }
    .cdmp500off__img {
        line-height: 1;
    }
    .cdmp500off__h--num {
        display: table-cell;
        font-size: 13px;
        line-height: 25px;
    }
    .cdmp500off__v--num {
        display: table-cell;
        font-size: 15px;
        font-weight: bold;
        line-height: 25px;
    }
    .cdmp500off__h--exp,
    .cdmp500off__v--exp {
        display: table-cell;
        font-weight: bold;
        font-size: 13px;
        text-align: center;
        line-height: 21px;
    }
    .cdmp500off__howto {
        position: absolute;
        display: inline-block;
        right: 26px;
        font-size: 13px;
        line-height: 25px;
        a {
            color: white;
            &:hover {
                text-decoration: none;
            }
        }
    }
}

/* バスケットページ
------------------------------------ */
#cdmpBASKET-1 {
    /* 500円クーポン */
    .Section--500off {
        overflow: hidden;
        position: relative;
        height: 120px;
        margin-bottom: 8px;
        padding: 0;
        background: url(//jp.images-monotaro.com/img/common/cdmp/bg_500coupon.png) repeat-x center top;
        line-height: 1;
    }
    .cdmp500off {
        position: absolute;
        display: table;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .cdmp500off__wrapper {
        position: relative;
        padding-top: 72px;
        display: table;
        width: 446px;
        margin: auto;
        color: #fff;
    }
    .cdmp500off__contents {
        display: table;
        margin: 0 auto;
        text-align: center;
    }
    .cdmp500off__img {
        line-height: 1;
    }
    .cdmp500off__h--num {
        display: table-cell;
        font-size: 13px;
        line-height: 25px;
    }
    .cdmp500off__v--num {
        display: table-cell;
        font-size: 15px;
        font-weight: bold;
        line-height: 25px;
    }
    .cdmp500off__h--exp,
    .cdmp500off__v--exp {
        display: table-cell;
        font-weight: bold;
        font-size: 13px;
        text-align: center;
        line-height: 21px;
    }
    .cdmp500off__howto {
        position: absolute;
        display: inline-block;
        font-size: 13px;
        right: 26px;
        line-height: 25px;
        a {
            color: white;
            &:hover {
                text-decoration: none;
            }
        }
    }
    .cdmp500off__text {
        font-weight: 700;
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 24px;
    }
}

#cdmpBASKET-2 {
    /* 特集バナー */
    .Section--Selection {
        margin-bottom: 24px;
    }
    .cdmpSelection {
        margin: 0 auto;
        max-width: 424px;
    }
    .cdmpSelection__Anchor {
        display: block;
        width: 100%;
        height: auto;
        background-color: var(--banner-theme-color);
        img {
            width: 100%;
            height: auto;
            vertical-align: bottom;
        }
    }
}

/* GP左カラム
------------------------------------- */
#cdmpPRODUCT-1,
#cdmpITEM-1 {
    /* 特集バナー */
    .Section--CDMP {
        padding-bottom: 16px;
        border-top: none;
    }
    /* heading */
    .Section::before {
        content: "お客様におすすめの特集";
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.2;
    }
    .CDMPBanner__List {
        overflow: hidden;
        margin-right: 0;
    }
    .CDMPBanner__Anchor {
        position: relative;
        overflow: hidden;
        width: 216px;
        height: 91px;
        background-color: var(--banner-theme-color);
        border: 1px solid var(--banner-theme-color);
        img {
            position: absolute;
            vertical-align: top;
        }
    }
    /* 500円クーポン */
    .Section--500off {
        position: relative;
        margin-bottom: 8px;
    }
    /* heading */
    .Section--500off::before {
        content: "期間限定クーポンがあります";
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.2;
    }
    .cdmp500off__img {
        vertical-align: bottom;
    }
    .cdmp500off__wrapper {
        position: absolute;
        top: 93px;
        left: 0;
        width: 100%;
    }
    .cdmp500off__contents {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    .cdmp500off__h--num {
        margin: 0;
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        white-space: nowrap;
    }
    .cdmp500off__v--num {
        margin: 0;
        color: #fff;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
    }
    .cdmp500off__v--exp {
        padding-top: 4px;
        font-size: 13px;
        text-align: center;
    }
}

/**
 * Owl Carousel v2.3.4
 * CSS for CDMP Web Promotions Carousel
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-carousel li{list-style:none}.owl-carousel{display:block}.owl-next,.owl-prev{border-radius:0!important;position:absolute;margin:5px}.owl-nav .disabled{opacity:.5;cursor:default}.owl-nav .disabled>span{color:#ccc!important}.owl-prev{left:-4px}.owl-next{right:-5px}.owl-prev-next-bigger-device{width:24px;height:55px;background:#fff!important;top:13px;border:1px solid #a8a8a8!important}.owl-prev-next-bigger-device>span{font-size:50px;position:absolute;top:-6px}.owl-prev-next-smaller-device{width:35px;height:45px;background:#28402a!important;top:18px;opacity:.7}.owl-prev-next-smaller-device>span{font-size:50px;color:#fff;position:absolute;top:-12px}.owl-prev-next-smaller-device.owl-prev>span{left:8px}.owl-prev-next-smaller-device.owl-next>span{right:7px}.owl-prev-next-bigger-device.owl-prev>span{left:2px}.owl-prev-next-bigger-device.owl-next>span{right:2px}