/* loperaio_sp_sale CSS */
body{ background: rgb(34, 34, 43) url(../images/logo_bg.png)no-repeat 50% 50% / 25% auto; }
#main_wrap{
    margin-top: 100px;
    height: auto;
    min-height: 81.5vh;
    animation-duration: 3s;
}
/*    background:linear-gradient(transparent, rgb(95, 130, 235));*/
#Wrapper.sp_sale {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    width: 100%;
    position: relative;
    min-width: 280px;
    overflow: hidden;
    padding-bottom: 0;
    background: rgb(34, 34, 43) url(../images/bg_car_sp.jpg)no-repeat 50% 100% / 130% auto;
    background-attachment: fixed;
    transition: all 15s ease;
}
#Wrapper.sp_sale.set{
    background-size: 100% auto;
    background-position: 50% 100%;
}

#Wrapper .canvas_area {
    position: absolute;
    top: 0;
    width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*.sp_sale #ContentsWrapper{
    background:url(../images/bg_icach.png)no-repeat 0 0 / 100% auto;
}*/
.sp_sale #ContentsWrapper img{
    width: 100%;
    height: auto;
}

#canvas {
  position:absolute;
  width:100%;
  opacity: .8;
  overflow: hidden;
  z-index: 0;
}

#icach {
    position: relative;
    margin-bottom: 13%;
}

#icach h2{ display: block; }
.sp_sale .ct2_img.tag{
    position: absolute;
    top: 0;
    width: 62%;
}
.sp_sale .kv0{
    display: block;
    width: 100%;
    left: auto;
    margin: 0 auto 0;
    position: relative;
    z-index: 2;
    animation-duration: 3s;
}
/*.sp_sale .kv0.rubberBand,*/

.sp_sale .kv1{
    text-align: center;
    margin: 0;
    width: 100%;
    animation-duration: 3s;
}
.sp_sale .kv2{
    text-align: center;
    margin: 1.2% auto 7%;
    width: 85%;
    color: #fff;
    text-align: left;
    font-size: 3.5vw;
    animation-duration: 3s;
}
.sp_sale .kv2 .ttl{
    display: block;
    margin: 0 0 4%;
    font-size: 115%;
    font-weight: 600;
}
.sp_sale .kv2 .txt{
    display: block;
    margin: 1.4% 0 0;
    font-size: 80%;
    color: rgb(214, 214, 214);
}
.sp_sale .kv2 a{ margin: 0 2px; color: rgb(214, 214, 214); text-decoration: underline; }


.sp_sale .kv3{
    text-align: center;
    margin: 0;
    width: 100%;
    animation-duration: 3s;
}
.sp_sale .kv3 a{ display: block; }
.sp_sale .kv3 a:nth-child(2){
    display: inline-block;
    margin: 7% auto 0;
    padding: 0 1em .3em 0;
    font-size: 3.5vw;
    color: #fff;
    background: url(../images/arr_r_wh.png)no-repeat 100% 50% / auto 60%;
    border-bottom: 1px solid rgb(181, 181, 181);
}
.sp_sale .kv3 a:hover{ opacity: .7; }


.sp_sale .stamp{
    right: 12%;
    margin: -18.5% 0 0;
    width: 22%;
    position: absolute;
    z-index: 1;
    visibility: hidden;
    animation-duration: 1.5s;
}


/*.sp_sale .bt_box.btn_upper{
    margin: -32% 0 0;
    padding: 35% 0 30px;
    background: url(../images/bg_btn_upper.png)no-repeat;
    background-position: 100% 0%;
    background-size: 100%;
}*/
.sp_sale .bt_box.btn_upper{ margin-top: -1% }
.sp_sale .bt_box a{ overflow: hidden; }
.sp_sale .bt_box img{ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); border-radius: 5px; }

/* content_box */
.sect1{ width: 100%; height: auto; min-height: 255px; padding: 0; }
.sp_sale .ct_img{
    display: block;
    margin: 0 auto;
    position: relative;
}
.sp_sale .ct_img.num0{
    width: 100%;
    margin: 40px 0 0 -28px;
    animation-duration: 2s;
}

.sp_sale .ct_img.num1{
    width: 100%;
    transition: 3s ;
    z-index: 2;
}

.sp_sale .ct_img.num2{
    max-width: 1120px;
    width: 70%;
    margin-top: 2%;
    z-index: 99;
}
.sp_sale .ct_img.num3{
    width: 100%;
    margin-top: -40%;
    position: absolute;
    text-align: center;
    animation-duration: 2s;
    z-index: 99;
}
.sp_sale .ct_img.num3 img{
    width: 50% !important;
}

.bt_box.num0{ margin: 100px  auto 15px; }

.ct2_img.num1 {
    width: auto;
    margin: 0 auto;
    padding: 0 0 20px;
    background: #fff;
}
.ct2_img.num2{
    width: auto;
    margin: 0 auto;
    padding: 0 0 20px;
}

/*.under_area {
    background: url(../images/under_img_bg_sp.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
*/
/*.content_box{
    background: rgb(244, 230, 203);
    background: linear-gradient(0deg, rgb(244, 230, 203, 1) 0%, rgb(244, 230, 203, 1) 70%, rgb(244, 230, 203, 1) 80%, rgb(244, 230, 203, 0) 100%);
    transition:all .8s;
}*/

/*.content_box .midle{ background: linear-gradient(transparent, rgb(95, 130, 235)); padding: 5% 5%; }*/
.content_box .midle{ margin: 30px auto 0; padding: 0; }
/*.content_box .midle .ttl{ margin: 5% auto 4%; }*/
.midle .ct2_img { margin: 0 auto; width: auto; padding-bottom: 5%; }
.midle .ct2_img .txt{ display: block; color: rgb(0, 70, 40); text-align: right; font-size: 2.8vw; }

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

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

.sect4 .wrap{
    max-width: 1140px;
    width: 90%;
    margin: 0 auto;
    padding: 90px 0;
}
*/
.sp_sale .bt_box { font-size: 0; margin: 0 auto; padding: 0; text-align: center; }
.sp_sale .bt_box.btn_btm{ padding: 5% 0; }

.sp_sale .bt_box a{ display: inline-block; width: 100%; }
.sp_sale .bt_box .bt_l,.sp_sale .bt_box .bt_r{
    text-align: center;
    margin: 2% auto 2%;
    font-size: 0;
    display: inline-block;
    min-width:240px;
    max-width: 630px;
    width: 85%;
    border-radius: 50px;
    position: relative;
    z-index: 10;
}

.sp_sale .bt_box.shop { padding: 7% 0 4%; }
.sp_sale .bt_box.shop h3{ width: 70%; max-width: 640px; margin: 0 auto 2%; }
.sp_sale a.bt_shop{ display: inline-block; width: 44%; margin: 2%; overflow: hidden; position: relative; }

/*.sp_sale .bt_box .bt_l{ margin-right: 35px; }*/

#pagetop{ width: 980px; margin: 0 auto 20px; }
footer{ opacity: 0; }


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

.ct2_img{
    animation-duration: 2s;
    animation-fill-mode: both;
}

.sect2 li:nth-child(2n) .ct2_img{
    animation-duration: 2.8s;
}

.ct2.txt{
    font-size: 12px;
    animation-duration: 5s;
}


.fadeIn {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
}

.zoomIn {
    animation-name: zoomIn;
}

.ZInLeft {
    animation-name: ZInLeft;
}


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

.flipInY{
    visibility: visible!important;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: flipInY;
    opacity: 1;
}


.rubberBand {
    visibility: visible !important;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: rubberBand;
}


.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;
}

@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; }
}

/*.reflection{
  animation: reflect 5s ease-in-out infinite;
  -webkit-animation: reflect 5s ease-in-out infinite;
}
.reflection.bt_r{ animation-delay: .09s; }

@keyframes reflect {
    0% { opacity: 1; }
    80% { opacity: 1; }
    81% { opacity: .4; }
    100% { opacity: 1; }
}*/


@keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


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

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

@keyframes zoomIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

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

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        transform: perspective(400px);
    }
}


@keyframes rubberBand {
    0% {
        transform: scaleX(1);
    }
    5% {
        transform: scale3d(1.25,.75,1);
    }
    15% {
        transform: scale3d(.75,1.25,1);
    }
    35% {
        transform: scale3d(1.15,.85,1);
    }
    50% {
        transform: scale3d(.95,1.05,1);
    }
    70% {
        transform: scale3d(1.05,.95,1);
    }
    100% {
        transform: scaleX(1);
    }
    0% {
        transform: scaleX(1);
    }
    5% {
        transform: scale3d(1.25,.75,1);
    }
    15% {
        transform: scale3d(.75,1.25,1);
    }
    35% {
        transform: scale3d(1.15,.85,1);
    }
    50% {
        transform: scale3d(.95,1.05,1);
    }
    70% {
        transform: scale3d(1.05,.95,1);
    }
    100% {
        transform: scaleX(1);
    }
}