/*===================================
 newフェードイン用のCSS type01
===================================*/

/* 左から */
.slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s 0s ease-out;
}
/* 遅らせて表示 */
.slide-left.delay01{
    transition: all 0.5s 0.2s ease-out;
}
.slide-left.delay02{
    transition: all 0.5s 0.4s ease-out;
}
.slide-left.delay03{
    transition: all 0.5s 1.0s ease-out;
}
.slide-left.delay04{
    transition: all 0.5s 1.1s ease-out;
}

/* 右から */
.slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s 0s ease-out;
}

/* 下から */
.slide-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s 0s ease-out;
}

/* 上から */
.slide-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.5s 0s ease-out;
}

/* ページ読み込んだ瞬間 */
.load {
	opacity: 1;
	transform: translate(0, 0);
}






.ph01-wrap {
    position: relative;
}
 
.photo-img-cross {
    position: relative;
    overflow: hidden;
    height: auto;
}
 
.photo-img-cross:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 100%;
    background-color: var(--color-blue);
    z-index: 1;
    transform-origin: right center;
    transform: scaleX(1);
    transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, 
    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
}
 
.photo-img-cross img {
    position: relative;
    height: auto;
    opacity: 0;
    left: -100%;
    transition: 0.7s;
}
 
.photo-move-cross img {
    opacity: 1;
    left: 0;
}
 
.photo-move-cross.photo-img-cross:before {
    transform: scaleX(0);
    width: 100%;
}