@charset "utf-8";

/*-------------------------------------------------
animation css
-------------------------------------------------*/

.ani_fadein {
visibility: hidden;
}
.ani_fadein.on {
animation-name: fadein;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}


.ani_fadeinup {
visibility: hidden;
}
.ani_fadeinup.on {
animation-name: fadeinup;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes fadeinup {
0% {
opacity:0;
transform:translateY(20px); 
}
100% {
opacity:1;
transform: none;
}
}


.ani_fadeinblur {
visibility: hidden;
}
.ani_fadeinblur.on {
animation-name: fadeinblur;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinblur {
0% {
opacity:0;
filter: blur(5px);
transform: scale(1.03);
}
100% {
opacity:1;
filter: none;
transform: none;
}
}


.ani_fadeinscale {
visibility: hidden;
}
.ani_fadeinscale.on {
animation-name: fadeinscale;
animation-duration: 4s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinscale {
0% {
opacity:0;
transform: scale(1.04);
}
100% {
opacity:1;
transform: none;
}
}


.ani_fadeinleft {
visibility: hidden;
}
.ani_fadeinleft.on {
animation-name: fadeinleft;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinleft {
0% {
opacity:0;
transform: translateX(-20px);
}
100% {
opacity:1;
transform: none;
}
}

.ani_fadeinright {
visibility: hidden;
}
.ani_fadeinright.on {
animation-name: fadeinright;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
visibility: visible;
}
@keyframes fadeinright {
0% {
opacity:0;
transform: translateX(20px);
}
100% {
opacity:1;
transform: none;
}
}

.ani_fadeout {
visibility: hidden;
}
.ani_fadeout.on {
animation-name: fadeout;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes fadeout {
0% {
opacity:1;
}
100% {
opacity:0;
}
}


.ani_width {
visibility: hidden;
}
.ani_width.on {
animation-name: ani_width;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
animation-play-state: running;
visibility: visible;
}

@keyframes ani_width {
0% {
width: 0%; 
}
100% {
width: 100%;
}
}


.ani_height {
visibility: hidden;
}
.ani_height.on {
animation-name: ani_height;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: both;
visibility: visible;
}
@keyframes ani_height {
0% {
height: 0%;
}
100% {
height: 100%;
}
}

/* ani_width ani_height マスクパーツ
-------------------------------------------------- */

.mask_box_blk {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #000;
width: 100%;
height: 100%;
}
.mask_box_gry {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #eee;
width: 100%;
height: 100%;
}
.mask_box_wht {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
width: 100%;
height: 100%;
}
.mask_box_red {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #C40A19;
width: 100%;
height: 100%;
}

/* imgスライドイン　.ani_imgslidein + thumbをセットで使用
-------------------------------------------------- */

.ani_imgslidein {
visibility: hidden;
position: relative;
}
.ani_imgslidein.on {
animation-name: img_fadein;
animation-duration: .5s;
animation-timing-function: ease;
animation-fill-mode: both;
visibility: visible;
}
.thumb {
display: block;
overflow: hidden;
position: relative;
animation-name: img_fadein;
animation-duration: .7s;
animation-timing-function: ease;
animation-fill-mode: both;
}

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

.thumb::before {
content: "";
width: calc(100% + 2px);
height: calc(100% + 2px);
position: absolute;
left: 0;
top: 0;
background: #000; /*プロジェクトにより背景色を変更*/
z-index: 10;
transform-origin: right center;
}
.on .thumb::before {
animation-name: slide_scaleX;
animation-duration: .9s;
animation-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes slide_scaleX {
0% {
transform: scaleX(1); 
}
100% {
transform: scaleX(0); 
}
}



/*-------------------------------------------------
delay
-------------------------------------------------*/

.delay_1s {
animation-delay: 0.1s !important;
}
.delay_2s {
animation-delay: 0.2s !important;
}
.delay_3s {
animation-delay: 0.3s !important;
}
.delay_4s {
animation-delay: 0.4s !important;
}
.delay_5s {
animation-delay: 0.5s !important;
}
.delay_6s {
animation-delay: 0.6s !important;
}
.delay_7s {
animation-delay: 0.7s !important;
}
.delay_8s {
animation-delay: 0.8s !important;
}
.delay_9s {
animation-delay: 0.9s !important;
}
.delay_10s {
animation-delay: 1s !important;
}
.delay_11s {
animation-delay: 1.1s !important;
}
.delay_12s {
animation-delay: 1.2s !important;
}
.delay_13s {
animation-delay: 1.3s !important;
}
.delay_14s {
animation-delay: 1.4s !important;
}
.delay_15s {
animation-delay: 1.5s !important;
}
.delay_16s {
animation-delay: 1.6s !important;
}
.delay_17s {
animation-delay: 1.7s !important;
}
.delay_18s {
animation-delay: 1.8s !important;
}
.delay_19s {
animation-delay: 1.9s !important;
}
.delay_20s {
animation-delay: 2s !important;
}
.delay_30s {
animation-delay: 3s !important;
}