@charset "utf-8";


/* アニメーションイージング */
.sp_top_pc_left,
.left_in,
.right_in,
.bottom_in,
.is_show{
    transition: 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 低位置に動かす */
.delay_numbers.on .sp_top_pc_left,
.delay_numbers.on .right_in,
.delay_numbers.on .left_in,
.delay_numbers.on .bottom_in,
.bottom_in.on,
.right_in.on,
.left_in.on{
    opacity: 1;
    transform: translate(0,0);
}


/* 左から */
.left_in{
    opacity: 0;
    transform: translate(-100px,0);
}
    
/* 右から */
.right_in{
    opacity: 0;
    transform: translate(100px,0);
}

/* 下から */
.bottom_in{
    opacity: 0;
    transform: translate(0,50px);
}

/* spは上から PCは左から */
.sp_top_pc_left{
    opacity: 0;
    transform: translate(0,-50px);
}

@media screen and (min-width : 768px){
    .sp_top_pc_left{
        opacity: 0;
        transform: translate(-100px,0);
    }
}

/* マスクで出現 */
.mask_in{
    
}

.mask_in .mask_width{
    display: inline-block;
}

/* mask_bg heightがあるのは改行できないから調整するため */
.mask_bg{
    display: inline-flex;
    align-items: center;
    background: transparent;
    position: relative;
    overflow: hidden;
    width: 0;
    transition: 3s ease-in-out;
}

.mask_in.sp_line2 .mask_bg{
    height: 40px;
}

.mask_in.on .mask_bg{
    width: 100%;
}

/* mask_txt */
.mask_in .mask_txt{
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 150%;
    font-size: 16px;
    color: #111;
    font-weight: 700;
    letter-spacing: 0.2em;
    white-space: nowrap;
}


/* マスクで画像出現 横がメイン */
.mask_img_in{
    
}

.mask_img_in .mask_img_width{
    display: inline-block;
}

/* mask_img_bg */
.mask_img_bg{
    display: inline-flex;
    align-items: center;
    background: transparent;
    position: relative;
    overflow: hidden;
    width: 0;
    transition: 1s ease-in-out;
}

.mask_img_in.on .mask_img_bg{
    width: 100%;
}

.mask_img_in.on .mask_img{
    overflow: hidden;
    line-height: 0;
    display: block;
}

.mask_img_in .mask_img img{
    width: 80vw;
    max-width: none;
}


/* マスクで画像出現 縦の場合 height、widthは画像によって調整ね */
.mask_img_in.height,
.mask_img_in.height.on .mask_img_bg{
    height: 100%;
}

.mask_img_in.height{
    position: relative;
    width: 100%;
}

.mask_img_in .mask_img_width{
    display: inline-block;
}

/* mask_img_bg bottom → top で上から出現 */
.height .mask_img_bg{
    width: 100%;
    height: 0;
    transform-origin: bottom left;
    position: absolute;
    left: 0;
    bottom: 0;
}

.mask_img_in.height.on .mask_img_bg{
    width: 100%;
}

.mask_img_in.height .mask_img img{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}


/* 遅れさせる */
.delay1{
    transition-delay: .3s;
}

.delay2{
    transition-delay: .6s;
}

.delay3{
    transition-delay: .9s;
}

.delay4{
    transition-delay: 1.2s;
}

.delay5{
    transition-delay: 1.5s;
}

.delay6{
    transition-delay: 1.8s;
}

.delay7{
    transition-delay: 2.1s;
}

.delay8{
    transition-delay: 2.4s;
}

.delay9{
    transition-delay: 2.7s;
}


/* 少し遅れさせる */
.dl1{
    transition-delay: .35s;
}

.dl2{
    transition-delay: .4s;
}

.dl3{
    transition-delay: .45s;
}

.dl4{
    transition-delay: .5s;
}

.dl5{
    transition-delay: .55s;
}

.dl6{
    transition-delay: .6s;
}

.dl7{
    transition-delay: .65s;
}

.dl8{
    transition-delay: .7s;
}

.dl9{
    transition-delay: .75s;
}