/*---------------------------------------------------------------------------------------- 

    Utility

----------------------------------------------------------------------------------------*/
@import url("https://use.typekit.net/bpk2aae.css");

.op-df{display:block; }
.op-serif{font-family: serif; letter-spacing: 0.2rem;}
.op-gotham{font-family: "gotham", sans-serif; letter-spacing: 0.4rem;}
.op-w4 { font-weight: 400;}
.op-lt02 { letter-spacing: 0.2em;}
.op-lt05 { letter-spacing: 0.05em;}

/*---------------------------------------------------------------------------------------- 

    上書き用

----------------------------------------------------------------------------------------*/
p { color:#333333 }
.block-category-list--children h2{background: #FAF8F8;}
/*---------------------------------------------------------------------------------------- 

    Utility

----------------------------------------------------------------------------------------*/
.op-mobile {display: block;}
.op-desktop {display: none;}
.op-w-100{ max-width: 100vw; margin-left: -2.0rem; width: 100vw; height: 100%;}
.op-br{border-radius: 4px; overflow: hidden;}
.op-img img{width: 100%;}
.op-tag{font-size: 1rem; background: #EA9292; padding:0.3rem 1.2rem 0.3rem 1.2rem;border-radius: 100vw;color: white;}
/*---------------------------------------------------------------------------------------- 

    op-mv

----------------------------------------------------------------------------------------*/
.op-mv{max-width: 100vw;margin-left: -2.0rem; width: 100vw;}
/*---------------------------------------------------------------------------------------- 

    op-campaign

----------------------------------------------------------------------------------------*/
.op-campaign{margin: 2.0rem auto;padding: 2.2rem;background: #FCFBFB;display: flex;align-items: center;position: relative;flex-wrap: wrap;border-radius: 4px;overflow: hidden; border: #F3F3F3 1px solid;}
.op-campaign img { height: 100%;position: absolute;right: 0;z-index: 1;}
.op-campaign-title { margin-right: 1.8rem; margin-bottom: 1.0rem; z-index: 2; }
.op-campaign-text  { z-index: 2; font-size: 1.2rem; line-height: 1.4;}
/*---------------------------------------------------------------------------------------- 

    op-pickupitem

----------------------------------------------------------------------------------------*/
.op-pickupitem{padding: 3.8rem 0 5.6rem 0;}
.op-pickupitem-title{ text-align: center; padding-bottom: 2.8rem;}
.op-pickupitem .op-title-en{font-size: 2rem; margin-bottom: .2em;}
.op-pickupitem .op-title-ja{font-size: 1.2rem; opacity: .5;}
/*---------------------------------------------------------------------------------------- 

    op-pickupitem-slide

----------------------------------------------------------------------------------------*/
.op-bg{height: 100%; background: linear-gradient(#faf8f800,#FAF8F8); z-index: 0; position:  absolute; bottom: 0;}
.op-pickupitem-slider{position: relative; width: 100%; padding-bottom: 5.6rem ;}
.op-slide{display: flex; }
.op-slider-image{position: relative;}
.op-slider-badge{position: absolute; left: 0.5rem; top: 0.5rem; width: 5.5rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 100vw; text-align: center; line-height: 1;} 
.op-slider-label{ display: inline-block;}
.op-slider-image {margin-bottom: 1rem;}
.op-slider-texts > *{ margin-bottom: 1rem;}
.op-slider{ width: 100%; margin: 0 auto; z-index: 2; position: relative;}
.op-slider-inner{width: calc(100% - .8rem); margin: 0 auto;  display: inline-block;}
.op-anchor-inner:hover,.op-slider-inner:hover{text-decoration: none;}
.op-slider-texts{text-align: center;}
.op-slider-text-cate{opacity: .3; margin-bottom: .5rem; font-size: 1rem;}
.op-slider-text-name{letter-spacing: -0.05em; font-size: 1.35rem;}
.op-slider-text-name .op-num{letter-spacing: 0;}
.op-slider-badge-text{font-size:.8rem; letter-spacing: -0.01em;}
.op-slider-btn{background: #fff; display: inline-flex; align-items: center; padding: 0.4rem 1.0rem; border-radius: 100vw;}
.op-dot{opacity: 0.2;}
.op-dot.dot--active{opacity: 1;}
/*---------------------------------------------------------------------------------------- 

    anchor

----------------------------------------------------------------------------------------*/
.op-anchor{display: flex; flex-wrap: wrap; }
.op-anchor-item{width: 100%;border: #EEEEEE 1px solid; padding: 1rem;}
.op-anchor-inner{display: flex; align-items: center;  justify-content: space-between;}
.op-anchor-img{display: flex; align-items: center; gap: 1.8rem;}
.op-anchor-img img{ width: 6rem; aspect-ratio: 1/1;}
.op-anchor svg{margin: 1rem;}
.op-anchor { gap: 0.8rem 0rem; }
/*---------------------------------------------------------------------------------------- 

    Slider

----------------------------------------------------------------------------------------*/
.op-arrow.op-arrow--left{ background: url(/category/c30/img/common/icon_left.png); left: -2.5rem; top: calc((100% - -3.0rem )/ 4);background-size: contain; background-size: 9px;background-repeat: no-repeat;background-position: center;}
.op-arrow.op-arrow--right{ background: url(/category/c30/img/common/icon_right.png); right: -2.5rem;top: calc((100% - -3.0rem )/ 4);background-size: contain; background-size: 9px;background-repeat: no-repeat;background-position: center;}
.op-arrow { width: 9px; height: 13px; position: absolute;   top: 50%; padding: 2rem; cursor: pointer; }
.op-arrow--disabled{opacity: .2; cursor:default}
.op-dots{width: 100%; display: flex;justify-content: center; }
.op-dot{width: 8px; height: 8px; margin: 6px; background: #E88B7E; border-radius: 100vw;}
.op-slider-nav{z-index: 2; position: relative;  padding: 2rem 0 0 0;}
.op-slide-all{position: absolute; left: 0;   font-size: 1.2rem; letter-spacing: 0.1em; opacity: .5;}
.keen-slider:not([data-keen-slider-disabled]) {-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent; align-content: flex-start; display: flex; overflow: hidden; position: relative; touch-action: pan-y;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;-khtml-user-select: none; width: 100%}
.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide { min-height: 100%; overflow: hidden; position: relative; width: 100%}
.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {flex-direction: row-reverse}
.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {flex-wrap: wrap}
/*---------------------------------------------------------------------------------------- 

    Responsive

----------------------------------------------------------------------------------------*/
@media screen and (min-width: 980px) {

    .op-w-100{  margin-left: calc((100vw - 980px) / -2); }
    .op-mobile { display: none }
    .op-desktop { display: block;}


    /**/
    
    /*---------------------------------------------------------------------------------------- 

    utility

    ----------------------------------------------------------------------------------------*/
    .op-tag{font-size: 1.2rem;}


    
    /*---------------------------------------------------------------------------------------- 

    mv

    ----------------------------------------------------------------------------------------*/
    .op-mv{max-width: 100vw;margin-left: 0rem; width: 100%;}
    /*---------------------------------------------------------------------------------------- 

    op-campaign

    ----------------------------------------------------------------------------------------*/
    .op-campaign{margin: 3.2rem auto}
    .op-campaign{margin: 2.0rem auto 0 auto;padding: 1.6rem;}
    .op-campaign-title { margin-bottom: 0; }
    .op-campaign-text br { display: none;}
    .op-campaign-text{font-size: 1.4rem;}
    /*---------------------------------------------------------------------------------------- 

        op-pickupitem

    ----------------------------------------------------------------------------------------*/
    .op-pickupitem{padding: 7.6rem 0 8rem 0;}
    .op-pickupitem-title{padding-bottom: 5.6rem;}
    .op-pickupitem .op-title-en{font-size: 2.5rem; margin-bottom: .2em;}
    .op-pickupitem .op-title-ja{font-size:1.2rem; opacity: .5;}
    .op-pickupitem-slider{ padding-bottom: 8rem ;}
    /*---------------------------------------------------------------------------------------- 

        op-pickupitem-slide
        
    ----------------------------------------------------------------------------------------*/
    .op-slider-badge-text{font-size:1.1rem}
    .op-slider-badge{width: 8rem; line-height: 1.4rem; left: 2rem; top: 2rem;}
    .op-slider-text-cate{font-size: 1.2rem;}
    .op-slider-text-name {font-size: 2.0rem; letter-spacing: 0.05em;}
    .op-slider-texts > *{ margin-bottom: 2rem;}
    .op-slider-image {margin-bottom: 1.8rem;}
    /**/
    .op-arrow.op-arrow--left{left: -5.5rem; top:calc((980px - 14rem) / 4)}
    .op-arrow.op-arrow--right{right: -5.5rem;top:calc((980px - 14rem) / 4)}
    /* .op-dots{ padding: 4rem 0 5.6rem 0; } */
    .op-slider-nav{padding-top: 2rem;}
    .op-slider-btn{background: #fff; display: inline-flex; align-items: center; padding: 0.8rem 1.2rem; border-radius: 100vw;}
    .op-slider{ width: calc((100% - 7rem));}
    .op-slider-inner{width: calc(100% - 4rem); }
    .op-slider-inner:hover img{ opacity: 1;}
    a.op-slider-inner:hover{text-decoration: none; opacity: .5;}
    a.op-slider-inner{ text-decoration: none;transition: .3s opacity;}
    /*---------------------------------------------------------------------------------------- 

        op-bnr
        
    ----------------------------------------------------------------------------------------*/
    .op-bnr{margin:4rem auto -3.6rem auto;display: inline-block;}
    .op-anchor{  gap: 0 4rem; flex-wrap: nowrap; margin-bottom: -4rem;}
    .op-anchor-item{  width: 100%;}


    .container h2, .container .h2{font-size: 2rem;}
   
}
@media screen and (min-width: 960px) and (max-width: 980px) {
    .op-w-100{  margin-left: 0; }
}