@charset "utf-8";

/* 20160331 高橋 */
/* 背景が動くスライダーのためのデザイン上書きCSS */
/* デザイン Photo　を想定 */

h1 {
    top:-490px !important;
    z-index:4;
}

#header_wrapper{
    position: absolute;
    background:none;
    z-index:5;
}

#body_sub #header_wrapper,
#body_free #header_wrapper{
    position:static;
}

#main_img_wrapper {
    position:relative;
    padding:0;
}

.slider_text{
    text-align:center;
    margin:0 0 15px;
    position:relative;
    max-width:960px;
    max-height:155px;
    overflow:hidden;
    margin:0 auto 30px;
}

.slider_btn{
    overflow:visible;
}

#increment,
#decrement{
    position:absolute;
    top:45%;
    width:50px;
    height:50px;
    border-radius: 100%;
    border: 1px solid #fff;
    cursor:pointer;
    color:#fff;
    text-align: center;
    line-height: 45px;
    box-shadow: 0px 0px 7px -1px #333;
    -moz-box-shadow: 0px 0px 7px -1px #333;
    -webkit-box-shadow: 0px 0px 7px -1px #333;
    text-shadow: 0 0 6px #000;
    z-index:1;
}

#increment {
    right:100px;
}

#decrement {
    left:100px;
}

#sliderSteps{
    position: absolute;
    width: 100%;
    bottom: 50px;
    height: 20px;
}

#sliderStepsContainer{
    margin: auto;
    height: 20px;
    width: 10px;
    position:relative;
    bottom:120px;
}

#sliderStepsContainer span {
    float:left;
    display:block;
    border-radius:100%;
    background:#fff;
    width:10px;
    height:10px;
    margin:0 5px 0 0;
    cursor:pointer;
    padding:0;
}

#sliderStepsContainer span.current {
    background:#ccc;
}

#sliderLoader {
    height: 1px;
    position: absolute;
    bottom: 70px;
    background: #fff;
    width: 100%;
}

#sliderLoader span {
    display:block;
	background: #ccc;
	margin:auto;
	width:0 ;
	height:1px;
    padding:0px;
    max-width:100%;
}


.slideshow-icon-addbg{
    background: #666;
    padding: 5px;
    border-radius: 3px;
    box-sizing: border-box;
}




#bgSlider{
    visibility:hidden;
}

#bgSlider:after {
    content: url(/cms/img/ajax_loader_alpha.gif);
    position: absolute;
    z-index: 1;
    top: calc( 50% - 9px );
    left: calc( 50% - 9px );
    visibility: visible;
}

#bgSlider.js-loaded{
    visibility:visible;
    background:none;
}

#bgSlider.js-loaded:after{
    display:none;
}



/* slideshow-playbtn */

.slideshow-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    background: #666 !important;
    display: block !important;
    border-radius: 3px !important;
    float: right !important;
    position: relative !important;
    margin-left: 5px !important;
    padding:0 !important;
}

.slideshow-icon-addbg {
    padding: 0 !important;
    margin: 0 !important;
    width: 36px !important;
    position: absolute !important;
    top: calc( 50% - 18px ) !important;
    left:calc( 50% - 18px ) !important;
}



/* fadein */

.slideshow-fadein{
    background-size:auto;
    background-repeat:no-repeat;
    background-position:center;
}


/* slidedown */

.slideshow-slidedown{
    position:absolute;
    background-size:auto;
    background-position: center -900px;
    background-repeat:no-repeat;
    animation-timing-function : ease-in-out;
    animation-duration:.75s;
    animation-fill-mode:forwards
}

.slideshow-slidedown-passive {
    background-position: center -900px;
    z-index:0;
    animation-name:slideup;
}

.slideshow-slidedown-active {
    background-position: center center;
    z-index:1;
    animation-name:slidedown;
}

.slideshow-slidedown *{
    display:none;
}

.slideshow-slidedown-active *{
    display:block;
}

.slideshow-slidedown-wrap #sliderStepsContainer,
.slideshow-slidedown-wrap #sliderLoader{
    z-index:1;
}


@keyframes slidedown{
    0%{background-position: center -900px;}
    100%{background-position: center center;}
}

@keyframes slideup{
    0%{background-position: center center;}
    100%{background-position: center -900px;}
}

@keyframes fadein{
    0%{opacity: 0;}
    75%{opacity: 1;}
    100%{opacity: 1;}
}



/* zoomin */

.slideshow-zoomin *{
    display:none;
    
}

.slideshow-zoomin-active *{
    display:block;
}

.slideshow-zoomin {
    z-index: 0;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size:auto;
    position:absolute;
}

.slideshow-zoomin-active{
    opacity:1;
    z-index:1;
    animation-name:zoomin;
    animation-duration:1s;
    animation-fill-mode:forwards;
    transform: scale( 1 ) rotate(0.1deg);
}

.slideshow-zoomin-wrap #sliderStepsContainer,
.slideshow-zoomin-wrap #sliderLoader{
    z-index:1;
}

@keyframes zoomin{
    0%{transform:scale(0.9) rotate(0deg);}
    100%{transform:scale(1) rotate(0deg);}
}



#bgSlider .newArrivalSlideShow {
    position: absolute;
    float: none !important;
    top: 5px;
    right: 8px;
    background-color: #f00;
    color: #fff !important;
    line-height: 16px !important;
    font-size: 12px !important;
    border-radius: 100%;
    text-align: center;
    width: 16px !important;
    height: 16px !important;
    padding: 0;
}

#bgSlider .newArrivalSlideShow:empty{
    display:none;
}



/*responsive*/
@media screen and (max-width: 480px) {

    #body_sub #header_wrapper,
    #body_free #header_wrapper{
        position:absolute;
    }


    /* slidedown */
    .slideshow-slidedown {
        display:none;
    }

    .slideshow-slidedown-active {
        display:block;
    }

    .slideshow-slidedown-wrap #increment,
    .slideshow-slidedown-wrap #decrement,
    .slideshow-slidedown-wrap #sliderStepsContainer{
        z-index:2;
    }

    @keyframes slidedown{
        0%{
            background-position-y: -1000px;
            opacity:0;
        }
        100%{
            background-position-y: center;
            opacity:1;
        }
    }


    /* zoomin */
    .slideshow-zoomin {
        position:absolute;
        display:none;
    }

    .slideshow-zoomin-active {
        display:block;
    }

    #bgSlider .slider_icons{
        display:block !important;
    }

}