/* loperaio_kessan CSS */
.business_info{ letter-spacing: .1em; color: #777; font-size: 90%; }

#Wrapper.business {
    width: 100%;
    position: relative;
    min-width: 980px;
    overflow: hidden;
/*    background: rgb(71, 163, 194) url(../images/sample.jpg);*/
}
.business #ContentsWrapper{}
.business #ContentsWrapper img{
    width: 100%;
    height: auto;
}
.business #icach{
    position: relative;
    text-align: center;
    padding: 0;
    background: rgb(48, 48, 48);
    box-sizing: border-box;
    height: 400px;
    background: rgb(101, 201, 230) url(../images/main_bg.png) no-repeat;
    background-position: 50%;
 }

/*.business section{
    margin: 0 auto 0;
    width: 995px;
    box-sizing: border-box;
}*/

#canvas {
  position:absolute;
  width:100%;
  height: 1000px;
  opacity: .9;
  overflow: hidden;
}
/*.business .bg_img{
    display: inline-block;
    padding: 850px 0 0;
    min-width: 980px;
    width: 90%;
    margin: 0 5%;
    background: url(../images/bg_kami_fubuki.png)no-repeat;
    background-position: 0 0;
    background-size: contain;
    position: absolute;
    z-index: 1;
    opacity: 0.6;
}*/

h2.entry-title{
    width: 100%;
    margin: 0 auto;
    background: url(../images/bg_black.png)repeat-x;
    background-size: 10px 500px;
}
.business .kv_img{
    position: absolute!important;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1400px;
    z-index: 9;
}

.business .kv_img.num1{
    margin-top: 5px;
    min-width: 560px;
    max-width: 770px;
    width: 40%;
}
.business .kv_img.num2 span.ttl{
    display: block;
    margin: 0 0 0 250px;
    width: 464px;
}
span.mark {
    position: absolute;
    display: block;
    margin-left: -9px;
    width: 123px;
    top: 82px;
    overflow: hidden;
    border-radius: 80px;
}

/* content_box */
.sect1{
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    max-width: 1400px;
    height: 400px;
}
.business .ct_img{
    display: block;
    margin: 0 auto;
    position: relative;
}
.business .ct_img.num0{
    position: absolute;
    width: auto;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    bottom: -89px;
    margin-left: 589px;
    z-index: 10;
}
.business .ct_img.num0 img{
    width: 707px!important;
    margin: 0 auto;
}

.business .ct_img.num1{
    width: 770px;
    z-index: 99;
}

.business .ct_img.num2{
    min-width: 685px;
    max-width: 1120px;
    width: 70%;
    margin-top: 2%;
    z-index: 99;
}
.business .ct_img.num3{
    width: 100%;
    margin-top: -6%;
    z-index: 99;
    position: absolute;
    text-align: center;
}
.business .ct_img.num3 img{
    margin-top: -9%;
    min-width: 285px;
    max-width: 470px;
    width: 29% !important;
}

.business .under_area{
    text-align: center;
    background-color: rgb(48, 54, 53);
    animation-duration: 3s;
}
.business .under_area .inner{
    max-width: 1400px;
    margin: 0 auto;
    background: rgb(48, 54, 53) url(../images/sub_bg.png) no-repeat;
    background-size: cover;
}

.business .under_area .ct2_img{
    display: inline-block;
    text-align: center;
    margin: 40px 0;
    width: 33.3%;
    border-left: 2px solid #555;
    box-sizing: border-box;
}
.business .under_area .ct2_img:nth-of-type(3){ border-right: 2px solid #555; }
.business .under_area .ct2_img img{ max-width: 322px;}

.business .txt_area{ margin: 2.3em 0 .8em; background-color: #fff; text-align: center; }
.business .txt_area p{ font-size: 100%; line-height: 2; letter-spacing: .1em; }
.business .txt_area p span{ font-weight: bold; }

.business .bn_area{ width: 801px; margin: 0 auto; }

.bt_box{ background-color: rgb(34, 34, 34); }
.bt_box.num0{
    margin: 100px  auto 15px;
    animation-duration: 1s;
}

.sect2{ min-width: 740px; max-width: 980px; width: 60%; margin: 0 auto 3%; font-size: 0; }
.sect2 h3{ width: 80%; margin: 5% auto 2.5%; }
.sect2 .sub{ text-align: center; font-weight: bold; font-size: 14px; margin-bottom: 3%; }
.sect2 li{ width: 33.3%; display: inline-block; padding: 0 7.5px; box-sizing: border-box; }
.sect2 .ct2_img{ margin-bottom: 15px; }

.business .sect2 .text{ font-size: 80%; margin: -25px 0 0; padding: 0 0 5px 37px; display: block; }


.sect3 {
    background: url(../images/bg_jpmap.png) no-repeat;
    background-size: cover;
}
.sect3 .wrap{
    min-width: 850px;
    max-width: 1140px;
    width: 75%;
    margin: 0 auto;
    padding: 90px 0;
}

.sect4 {
    background: url(../images/bg_skincare.jpg) no-repeat;
    background-size: cover;
}

.sect4 .wrap{
    min-width: 850px;
    max-width: 1140px;
    width: 75%;
    margin: 0 auto;
    padding: 90px 0;
}

.bt_box.shop h3{ width: 50%; max-width: 640px; margin: 0 auto 2%; }

.business .bt_box{ margin: 0; padding: 40px 0 4%; width: 100%; text-align: center; position: relative; font-size: 0; background-color: #fff; }
.business .bt_box .bt_l,.business .bt_box .bt_r{ display: inline-block; width: 29%; width: 380px; overflow: hidden; position: relative; }
.business .bt_box .bt_l{ margin-right: 40px; }
.business .bt_box a:hover{ opacity: .8; }
.bt_shop{ display: inline-block; width: 20%; min-width: 150px; max-width: 220px; margin: 0 .7%; overflow: hidden; position: relative; }
/*.business .bt_box .bt_l{ margin-right: 35px; }*/

#cp1{ margin-bottom: 40px; }
#cp1{ margin-bottom: 30px; }
#cp1 .image,#cp2 .image{ margin-right: -32px; }

.business #pagetop{ width: 980px; margin: 10px auto 15px; }

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

@media screen and (max-width: 1400px){
    .business #icach{ background-position: 42% 50%; }
    .business .ct_img.num0{ margin-left: 42%; }
    .business .kv_img.num2 span.ttl{ margin-right: 50%; margin-left: auto; }
}
/*@media screen and (max-width: 1200px){
    .business .ct_img.num0{ top: 45.5%; }
}

@media screen and (max-width: 1050px){
    .business .ct_img.num0{ top: 44.5%; }
}
@media screen and (max-width: 980px){
}*/


/* animetion */
.kv_img.num1{
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}
.kv_img.num2{
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
}

.ct_img{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
/*.ct_img.num2{
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.ct_img.num3{
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
}
.ct_img.num4{
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
}*/

.ct2_img{
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.ct2_img.num2,.ct2_img.num5,.ct2_img.num8{
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}
.ct2_img.num3,.ct2_img.num6,.ct2_img.num9{
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}


.ct2.txt{
-webkit-animation-duration: 5s;
animation-duration: 5s;
}

.slideInUp {
    display: block;
    visibility: visible!important;
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

.slideInUpL {
    display: block;
    visibility: visible!important;
    -webkit-animation-name: slideInUpL;
    animation-name: slideInUpL;
}

.slideInDw {
    display: block;
    visibility: visible!important;
    -webkit-animation-name: slideInDw;
    animation-name: slideInDw;
}

.fadeIn {
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.zoomIn {
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.InRight {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: InRight;
    animation-name: InRight;
}

.InLeft {
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: InLeft;
    animation-name: InLeft;
}

.ZInLeft {
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: ZInLeft;
    animation-name: ZInLeft;
}

.ZInRight {
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: ZInRight;
    animation-name: ZInRight;
}
.BoundIN{
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: BoundIN;
    animation-name: BoundIN;
}


.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 3s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 3s ease-in-out infinite;
}

@keyframes reflect {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: .5; }
    81% { transform: scale(4) rotate(45deg); opacity: .8; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: .5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: .8; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }
    50% {
        opacity: 1;
    }
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}



@-webkit-keyframes InRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        -webkit-transform: translate3d(3000px,0,0);
        opacity: 0;
        transform: translate3d(3000px,0,0);
    }
    60% {
        -webkit-transform: translate3d(-25px,0,0);
        opacity: 1;
        transform: translate3d(-25px,0,0);
    }
    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0);
    }
    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes InRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        -webkit-transform: translate3d(3000px,0,0);
        opacity: 0;
        transform: translate3d(3000px,0,0);
    }
    60% {
        -webkit-transform: translate3d(-25px,0,0);
        opacity: 1;
        transform: translate3d(-25px,0,0);
    }
    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0);
    }
    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}



@-webkit-keyframes InLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        -webkit-transform: translate3d(-3000px,0,0);
        opacity: 0;
        transform: translate3d(-3000px,0,0);
    }
    60% {
        -webkit-transform: translate3d(25px,0,0);
        opacity: 1;
        transform: translate3d(25px,0,0);
    }
    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
    }
    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes InLeft {
0%, 60%, 75%, 90%, 100% {
    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
    animation-timing-function: cubic-bezier(.215,.61,.355,1);
}
    0% {
        -webkit-transform: translate3d(-3000px,0,0);
        opacity: 0;
        transform: translate3d(-3000px,0,0);
    }
    60% {
        -webkit-transform: translate3d(25px,0,0);
        opacity: 1;
        transform: translate3d(25px,0,0);
    }
    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
    }
    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@-webkit-keyframes ZInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        -webkit-transform: scale3d(.1,.1,.1) translate3d(-3000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-3000px,0,0);
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    }
}
@keyframes ZInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        -webkit-transform: scale3d(.1,.1,.1) translate3d(-3000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-3000px,0,0);
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
    }
}

@-webkit-keyframes ZInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        -webkit-transform: scale3d(.1,.1,.1) translate3d(3000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(3000px,0,0);
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    }
}
@keyframes ZInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        -webkit-transform: scale3d(.1,.1,.1) translate3d(3000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(3000px,0,0);
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
    }
}


@-webkit-keyframes BoundIN {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes BoundIN {
    0%{
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0);
        visibility: visible;
                opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
                opacity: 1;
    }
}


@keyframes slideInUp {
    0% {

        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0);
        visibility: visible;
                        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
                        opacity: 1;
    }
}


@-webkit-keyframes slideInUpL {
    0% {
        -webkit-transform: translate3d(0,150%,0);
        transform: translate3d(0,150%,0);
        visibility: visible;
                opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
                opacity: 1;
    }
}


@keyframes slideInUpL {
    0% {

        -webkit-transform: translate3d(0,150%,0);
        transform: translate3d(0,150%,0);
        visibility: visible;
                        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
                        opacity: 1;
    }
}


@-webkit-keyframes slideInDw {
    0% {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
        visibility: visible;
                opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
                opacity: 1;
    }
}


@keyframes slideInDw {
    0% {

        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
        visibility: visible;
                        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
                        opacity: 1;
    }
}