/* バナー アニメ */
.banner_block .banner_slide > a:not(:first-child) { display: none; }
.banner_block .banner_slide > a:first-child div:first-child { position: relative; }

.banner_block .banner_slide { position: relative; }
.banner_block .banner_slide > a:first-child { display: block; }
.banner_block .banner_slide > a:first-child img { opacity: 0; }
.banner_block .banner_slide > a:first-child .bs_bg { transition: 0.75s; -moz-transition: 0.75s; -webkit-transition: 0.75s; -o-transition: 0.75s; opacity: 0; border-radius: 10px; box-shadow: 0px 0px 90px #ffffff inset; position: absolute; top: 50%; left: 50%; z-index: 0; transform: translate(-50%,-50%); height: 95%; width: 95%; background-size: cover; }
.banner_block .banner_slide.showBanner > a:first-child .bs_bg { opacity: 1; width: 100%; height: 100%; border-radius: 0px; box-shadow: 0 0 0 #ffffff inset; }

.photo_bar.slick-initialized .slick-slide > div{ margin: 0 10px; }
.photo_bar.slick-initialized .slick-slide > div .one_photo { margin:0 0 40px; width:450px !important; }
.photo_bar.slick-initialized .slick-slide > div .one_photo.img_h,
.photo_bar.slick-initialized .slick-slide > div .one_photo.img_w{ width:auto !important; }
.photo_bar.slick-initialized .slick-slide > div .one_photo.img_h img{ max-width:450px; max-height:300px; height:100%; width: auto; }
.photo_bar.slick-initialized .slick-slide > div .one_photo.img_w img{ max-width:450px; max-height:300px; height:auto; width:100%; }

.banner_block .banner_left, .banner_block .banner_right, .banner_block .slide_bar { transition: 0.75s; -moz-transition: 0.75s; -webkit-transition: 0.75s; -o-transition: 0.75s; opacity: 0; }
.banner_block.bs_complate .banner_left, .banner_block.bs_complate .banner_right, .banner_block.bs_complate .slide_bar { opacity: 1; }

.about_block .photo_bar .slick-slide .one_photo { margin: 0 10px 40px; }

/* Bottom Bubbly */
#myCanvas canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; }
.brand_block .brand_con .title,
.brand_block .brand_con img { position: relative; z-index: 1; }

/*  */
.prod_block::after, .prod_block::before, .about_block::after { transition:opacity .5s; -moz-transition:opacity .5s; -webkit-transition:opacity .5s; -o-transition:opacity .5s; opacity:0; }
body.showPBAnimation .prod_block::after,body.showPBAnimation .prod_block::before,body.showPBAnimation .about_block::after { opacity:1; }

.one_banner.b01 .i02 { opacity: 0; }
.one_banner.b01 .i03 { opacity: 0; }
.one_banner.b01 .i04 { opacity: 0; }
.one_banner.b01 .i05 { opacity: 0; }
.one_banner.b01 .i06 { opacity: 0; }
.setAnimate .one_banner.b01 .i02 {
    -moz-animation: fadein 1.25s ease 1.55s forwards; /* Firefox */
    -webkit-animation: fadein 1.25s ease 1.55s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.25s ease 1.55s forwards; /* Opera */
    animation: fadein 1.25s ease 1.55s forwards;
}
.setAnimate .one_banner.b01 .i03 {
    -moz-animation: fadein 1.50s ease 1.80s forwards; /* Firefox */
    -webkit-animation: fadein 1.50s ease 1.80s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.50s ease 1.80s forwards; /* Opera */
    animation: fadein 1.50s ease 1.80s forwards;
}
.setAnimate .one_banner.b01 .i04 {
    -moz-animation: fadein 1.75s ease 2.05s forwards; /* Firefox */
    -webkit-animation: fadein 1.75s ease 2.05s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.75s ease 2.05s forwards; /* Opera */
    animation: fadein 1.75s ease 2.05s forwards;
}
.setAnimate .one_banner.b01 .i05 {
    -moz-animation: fadein 2.00s ease 2.30s forwards; /* Firefox */
    -webkit-animation: fadein 2.00s ease 2.30s forwards; /* Safari and Chrome */
    -o-animation: fadein 2.00s ease 2.30s forwards; /* Opera */
    animation: fadein 2.00s ease 2.30s forwards;
}

.one_banner.b02 .i02 { opacity: 0; }
.one_banner.b02 .i03 { opacity: 0; }
.one_banner.b02 .i04 { opacity: 0; }
.one_banner.b02 .i05 { opacity: 0; }
.one_banner.b02 .i06 { opacity: 0; }
.setAnimate .one_banner.b02 .i02 {
    -moz-animation: fadein 1.25s ease 1.55s forwards; /* Firefox */
    -webkit-animation: fadein 1.25s ease 1.55s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.25s ease 1.55s forwards; /* Opera */
    animation: fadein 1.25s ease 1.55s forwards;
}
.setAnimate .one_banner.b02 .i03 {
    -moz-animation: fadein 1.50s ease 1.80s forwards; /* Firefox */
    -webkit-animation: fadein 1.50s ease 1.80s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.50s ease 1.80s forwards; /* Opera */
    animation: fadein 1.50s ease 1.80s forwards;
}
.setAnimate .one_banner.b02 .i04 {
    -moz-animation: fadein 1.75s ease 2.05s forwards; /* Firefox */
    -webkit-animation: fadein 1.75s ease 2.05s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.75s ease 2.05s forwards; /* Opera */
    animation: fadein 1.75s ease 2.05s forwards;
}
.setAnimate .one_banner.b02 .i05 {
    -moz-animation: fadein 2.00s ease 2.30s forwards; /* Firefox */
    -webkit-animation: fadein 2.00s ease 2.30s forwards; /* Safari and Chrome */
    -o-animation: fadein 2.00s ease 2.30s forwards; /* Opera */
    animation: fadein 2.00s ease 2.30s forwards;
}
.setAnimate .one_banner.b02 .i06 {
    -moz-animation: fadein 2.50s ease 3.00s forwards; /* Firefox */
    -webkit-animation: fadein 2.50s ease 3.00s forwards; /* Safari and Chrome */
    -o-animation: fadein 2.50s ease 3.00s forwards; /* Opera */
    animation: fadein 2.50s ease 3.00s forwards;
}

/*.one_banner.b03 .i01 { opacity: 0; }*/
.one_banner.b03 .i02 { opacity: 0; }
.one_banner.b03 .i03 { opacity: 0; }
.one_banner.b03 .i04 { opacity: 0; }
/*.setAnimate .one_banner.b03 .i01 {
/*    -moz-animation: fadein 0.90s ease 1.1s forwards; /* Firefox */
/*    -webkit-animation: fadein 0.90s ease 1.1s forwards; /* Safari and Chrome */
/*    -o-animation: fadein 0.90s ease 1.1s forwards; /* Opera */
/*    animation: fadein 0.90s ease 1.1s forwards;
}*/
.setAnimate .one_banner.b03 .i02 {
    -moz-animation: fadein 1.05s ease 1.25s forwards; /* Firefox */
    -webkit-animation: fadein 1.05s ease 1.25s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.05s ease 1.25s forwards; /* Opera */
    animation: fadein 1.05s ease 1.25s forwards;
}
.setAnimate .one_banner.b03 .i03 {
    -moz-animation: fadein 1.20s ease 1.40s forwards; /* Firefox */
    -webkit-animation: fadein 1.20s ease 1.40s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.20s ease 1.40s forwards; /* Opera */
    animation: fadein 1.20s ease 1.40s forwards;
}
.setAnimate .one_banner.b03 .i04 {
    -moz-animation: fadein 1.35s ease 1.55s forwards; /* Firefox */
    -webkit-animation: fadein 1.35s ease 1.55s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.35s ease 1.55s forwards; /* Opera */
    animation: fadein 1.35s ease 1.55s forwards;
}

/*.one_banner.b04 .i01 { opacity: 0; }*/
.one_banner.b04 .i02 { opacity: 0; }
.one_banner.b04 .i03 { opacity: 0; }
.one_banner.b04 .i04 { opacity: 0; }
.one_banner.b04 .i05 { opacity: 0; }
.one_banner.b04 .i06 { opacity: 0; }
/*.setAnimate .one_banner.b04 .i01 {
/*    -moz-animation: fadein 0.90s ease 1.2s forwards; /* Firefox */
/*    -webkit-animation: fadein 0.90s ease 1.2s forwards; /* Safari and Chrome */
/*    -o-animation: fadein 0.90s ease 1.2s forwards; /* Opera */
/*    animation: fadein 0.90s ease 1.2s forwards;
}*/
.setAnimate .one_banner.b04 .i02 {
    -moz-animation: fadein 1.25s ease 1.55s forwards; /* Firefox */
    -webkit-animation: fadein 1.25s ease 1.55s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.25s ease 1.55s forwards; /* Opera */
    animation: fadein 1.25s ease 1.55s forwards;
}
.setAnimate .one_banner.b04 .i03 {
    -moz-animation: fadein 1.50s ease 1.80s forwards; /* Firefox */
    -webkit-animation: fadein 1.50s ease 1.80s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.50s ease 1.80s forwards; /* Opera */
    animation: fadein 1.50s ease 1.80s forwards;
}
.setAnimate .one_banner.b04 .i04 {
    -moz-animation: fadein 1.75s ease 2.05s forwards; /* Firefox */
    -webkit-animation: fadein 1.75s ease 2.05s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.75s ease 2.05s forwards; /* Opera */
    animation: fadein 1.75s ease 2.05s forwards;
}
.setAnimate .one_banner.b04 .i05 {
    -moz-animation: fadein 2.00s ease 2.30s forwards; /* Firefox */
    -webkit-animation: fadein 2.00s ease 2.30s forwards; /* Safari and Chrome */
    -o-animation: fadein 2.00s ease 2.30s forwards; /* Opera */
    animation: fadein 2.00s ease 2.30s forwards;
}
.setAnimate .one_banner.b04 .i06 {
    -moz-animation: fadein 2.50s ease 3.00s forwards; /* Firefox */
    -webkit-animation: fadein 2.50s ease 3.00s forwards; /* Safari and Chrome */
    -o-animation: fadein 2.50s ease 3.00s forwards; /* Opera */
    animation: fadein 2.50s ease 3.00s forwards;
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
/* end fadein animation */

/* begin fadeout animation */

@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity:1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

/* Parrallax */
@media screen and (min-width:768px){
    .about_block .about_con .con_block,
    .about_block .about_con .con_block .image{ position: relative; }
    .about_block .about_con .con_block .image .img{ position: absolute; height: 100%; width: 100%; }
    .about_block .about_con .con_block .image .img img{ position: absolute; width: 100%; } 
    .about_block .about_con .con_block .image > img.img_mobile{display: none;}
    .about_block .about_con::before{ opacity: 0; }
    .parallax-mirror::before{ content: ""; display: block; position: absolute; top: 0px; left: 0; right: 0; height: 150px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); z-index: 1; }
    .parallax-slider{ left: 50% !important; transform: translateX(-50%) !important; height: auto !important; max-width: 100% !important;/* border: red 1px solid;*/ }
    .about_block .about_con .con_block{ background-image: none; }
}
@media screen and (max-width:1280px) and (min-width: 768px){
    .parallax-mirror{ left: 0 !important; }
}
@media screen and (max-width:767px){
    .about_block .about_con .con_block .image > .img{ display:none; }
    .about_block .about_con .con_block img.img_area{display: none;}
    .parallax-mirror{opacity:0 !important;}
    .parallax-container{display:none;}
}