@charset 'UTF-8';


@media screen and (min-width: 1090px){

    /* Slider */
    /* .slick-loading .slick-list
    {
        background: #fff url("{!URLFOR($Resource.P_PUB_JS, 'js/lib/slick/ajax-loader.gif')}") center center no-repeat;
    } */

    /* Icons */
    /* @font-face
    {
        font-family: 'slick';
        font-weight: normal;
        font-style: normal;

        src: url("{!URLFOR($Resource.P_PUB_JS, 'js/lib/slick/fonts/slick.eot')}");
        src: url("{!URLFOR($Resource.P_PUB_JS, 'js/lib/slick/fonts/slick.eot?#iefix')}") format('embedded-opentype'), url("{!URLFOR($Resource.P_PUB_JS, 'js/lib/slick/fonts/slick.woff')}") format('woff'), url("{!URLFOR($Resource.P_PUB_JS, 'js/lib/slick/fonts/slick.ttf')}") format('truetype'), url("{!URLFOR($Resource.P_PUB_JS, 'js/lib/slick/fonts/slick.svg#slick')}") format('svg');
    } */

    /* Arrows */
    .slick-prev,
    .slick-next
    {
        font-size: 0;
        line-height: 0;

        position: absolute;
        /* top: 50%; */

        display: block;

        width: 20px;
        /* height: 20px; */
        padding: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);

        cursor: pointer;

        color: transparent;
        border: none;
        outline: none;
        background: transparent;

        top: calc(50% + 5px);
        height: calc(100% + 15px);
    }
    .slick-prev:hover,
    .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus
    {
        /* color: transparent;
        outline: none;
        background: transparent; */
        color: transparent;
        border-color: #fff;
        background: #b22222;
    }    

    .slick-prev:hover:before,
    .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before
    {
        opacity: 1;
    }

    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before
    {
        opacity: .25;
    }

    .slick-prev:before,
    .slick-next:before
    {
        font-family: 'slick';
        font-size: 20px;
        line-height: 1;

        opacity: .75;
        color: #b22222;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        content: ''!important;
        position: absolute;
        width: 0;
        height: 0;
        margin-top: -5px;
        border: 5px solid transparent;
        transition: all .2s;

    }

    .slick-prev:hover:before{
        /* border-right-color: #b22222; */
        right: .7em;
    }
    .slick-next:hover:before{
        /* border-left-color: #b22222; */
        left: .7em;
    }


    .slick-prev
    {
        /* left: -25px; */
        /* left:170px; */
        display: inline-block;
        /* height:calc(100% - 22px); */
        /* min-height: 30px; */
        /* height: 100%; */
        width:35px;
        background: #b22222;
        box-shadow: 0 0 0 3px #b22222;
        border: solid 1.5px rgba(255,255,255,0.7);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    [dir='rtl'] .slick-prev
    {
        right: -25px;
        left: auto;
    }
    .slick-prev:before
    {
        content: '';
        right:30%;
        top: calc(50% - 5.5px);
        border-right: 15px solid #fff;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
    [dir='rtl'] .slick-prev:before
    {
        content: '\02192';
    }

    .slick-next
    {
        right: -40px;
        /* right:145px; */
        display: inline-block;
        /* height:calc(100% - 22px); */
        /* min-height: 30px; */
        /* height: 100%; */
        width:35px;
        background: #b22222;
        box-shadow: 0 0 0 3px #b22222;
        border: solid 1.5px rgba(255,255,255,0.7);
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    [dir='rtl'] .slick-next
    {
        right: auto;
        left: -25px;
    }
    .slick-next:before
    {
        content: '';
        left:30%;
        top: calc(50% - 5.5px);
        border-left: 15px solid #fff;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
    [dir='rtl'] .slick-next:before
    {
        content: '\02190';
    }

    /* Dots */
    .slick-dotted.slick-slider
    {
        margin-bottom: 20px;
        min-height: 20px;
    }

    .slick-dots
    {
        margin-bottom: 5px;
    }
    .slick-dots li
    {
        position: relative;

        display: inline-block;

        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;

        cursor: pointer;
    }
    .slick-dots li button
    {
        font-size: 0;
        line-height: 0;

        display: block;

        width: 20px;
        height: 20px;
        padding: 5px;

        cursor: pointer;

        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
    }
    .slick-dots li button:hover,
    .slick-dots li button:focus
    {
        outline: none;
    }
    .slick-dots li button:hover:before,
    .slick-dots li button:focus:before
    {
        opacity: 1;
    }
    .slick-dots li button:before
    {
        font-family: 'slick';
        line-height: 20px;

        position: absolute;
        top: 0;
        left: 0;

        width: 20px;
        height: 20px;

        content: '\02022';
        text-align: center;

        opacity: .25;
        color: black;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .slick-dots li.slick-active button:before
    {
        opacity: .75;
        color: black;
    }
    /* 件数表示 */ 
    /* .slick-counter{
        position: absolute;
        top: 20px; 
        right: 185px
      } */
}

@media screen and (max-width: 1089px){

    /* Arrows */
    .slick-prev,
    .slick-next
    {
        font-size: 0;
        line-height: 0;

        position: absolute;
        top: calc(50% + 7.5px);

        display: block;

        width: 20px;
        /* height: 100%; */
        height: calc(100% + 10px);
        padding: 0;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);

        cursor: pointer;

        color: transparent;
        border: none;
        outline: none;
        background: transparent;
    }
    .slick-prev:hover,
    .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus
    {
        color: transparent;
        outline: none;
        /* background: transparent; */
        border-color: #fff;
        background: #b22222;
    }
    .slick-prev:hover:before,
    .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before
    {
        opacity: 1;
    }
    .slick-prev.slick-disabled:before,
    .slick-next.slick-disabled:before
    {
        opacity: .25;
    }

    .slick-prev:before,
    .slick-next:before
    {
        font-family: 'slick';
        font-size: 20px;
        line-height: 1;

        opacity: .75;
        color: #b22222;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        content: ''!important;
        position: absolute;
        width: 0;
        height: 0;
        margin-top: -5px;
        border: 5px solid transparent;
        transition: all .2s;

    }

    .slick-prev:hover:before{
        /* border-right-color: #b22222; */
        right: .7em;
    }
    .slick-next:hover:before{
        /* border-left-color: #b22222; */
        left: .7em;
    }

    .slick-prev
    {
        /* left:15px; */
        display: inline-block;
        /* height:calc((100% - 43px)*0.7); */
        width:35px;
        background: #b22222;
        box-shadow: 0 0 0 3px #b22222;
        border: solid 1.5px rgba(255,255,255,0.7);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    [dir='rtl'] .slick-prev
    {
        right: -25px;
        left: auto;
    }
    .slick-prev:before
    {
        content: '';
        right:30%;
        top: calc(50% - 5.5px);
        border-right: 15px solid #fff;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
    [dir='rtl'] .slick-prev:before
    {
        content: '\02192';
    }

    .slick-next
    {
         right:-40px;
         display: inline-block;
         /* height:calc((100% - 43px)*0.7); */
         width:35px;
         background: #b22222;
         box-shadow: 0 0 0 3px #b22222;
         border: solid 1.5px rgba(255,255,255,0.7);
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
    }
    [dir='rtl'] .slick-next
    {
        right: auto;
        left: -25px;
    }
    .slick-next:before
    {        
        content: '';
        left:30%;
        top: calc(50% - 5.5px);
        border-left: 15px solid #fff;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
    [dir='rtl'] .slick-next:before
    {
        content: '\02190';
    }

    /* Dots */
    .slick-dotted.slick-slider
    {
        margin: 0 0 16px 5px;
        width: calc(100% - 65px);
    }

    .slick-dots
    {
        width: 90%;
    }
    .slick-dots li
    {
        position: relative;

        display: inline-block;

        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;

        cursor: pointer;
    }
    .slick-dots li button
    {
        font-size: 0;
        line-height: 0;

        display: block;

        width: 20px;
        height: 20px;
        padding: 5px;

        cursor: pointer;

        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
    }
    .slick-dots li button:hover,
    .slick-dots li button:focus
    {
        outline: none;
    }
    .slick-dots li button:hover:before,
    .slick-dots li button:focus:before
    {
        opacity: 1;
    }
    .slick-dots li button:before
    {
        font-family: 'slick';
        line-height: 20px;

        position: absolute;
        top: 0;
        left: 0;

        width: 20px;
        height: 20px;

        content: '\02022';
        text-align: center;

        opacity: .25;
        color: black;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .slick-dots li.slick-active button:before
    {
        opacity: .75;
        color: black;
    }
    /* 件数表示 */
    /* .slick-counter{
        text-align: center;
        bottom:20px;
        margin-bottom:-30px;
        margin-top: 10px;
      } */
}