@charset "utf-8";
/* CSS Document */
.mv-slide{ position: relative;}
.slide_in::before,
.slide_in::after{
    content: "";
    background: #FFF;
    width: 200%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
.section-title.slide_in::before,.section-title.slide_in::after{
    background: #EFF3F9;
    left: 0;
    right: auto;
}
.txtBox_title_slide_in::after, .txtBox_title_slide_in_mirror::before {
    content: "";
    background: #28469B;
    z-index: 1;
    width: 200%;
    height: 130%;
    position: absolute;
    bottom: 0;
}

.mv-slide.txtBox_title_slide_in_mirror::before{
    content: "";
    background: #FFFF;
    z-index: 1;
    width: 200%;
    height: 100%;
    position: absolute;
    bottom: 0;
}

.slide_in{
-webkit-animation: 1.5s slideOut forwards;
animation: 1.5s slideOut forwards
}
.mv-slide{
-webkit-animation: 1.5s slideIn forwards;
animation: 1.5s slideIn forwards
}
.slide_in::after{
background: #FFF;
z-index: 1;
width: 200%;
height: 100%;
position: absolute;
right: 0;
top: 0;
-webkit-animation: 1s slideOutMask forwards;
animation: 1s slideOutMask forwards
}
.mv-slide::after{
background: #FF0000;
z-index: 1;
width: 200%;
height: 100%;
position: absolute;
right: 0;
top: 0;
-webkit-animation: 1s slideOutMask forwards;
animation: 1s slideOutMask forwards
}

.txtBox_title_slide_in{
-webkit-animation: 1s slideOutMirror forwards;
animation: 1s slideOutMirror forwards
}
.txtBox_title_slide_in::after {
left: 0;
-webkit-animation: 1s slideOutMaskMirror forwards;
animation: 1s slideOutMaskMirror forwards
}
.txtBox_title_slide_in_mirror {
-webkit-animation: 1s slideOut forwards;
animation: 1s slideOut forwards
}
.txtBox_title_slide_in_mirror::before{
right: 0;
-webkit-animation: 1s slideOutMask forwards;
animation: 1s slideOutMask forwards
}
.animation_slide_in,
.mv_animation_slide{
-webkit-animation: 1.5s slideIn forwards;
animation: 1.5s slideIn forwards
}
.animation_slide_in::after,
.mv_animation_slide::after{
-webkit-animation: 1.5s slideInMask forwards;
animation: 1.5s slideInMask forwards
}
.animation_title_slide_in,
.section-title.slide_in{
-webkit-animation: 1.5s slideInMirror forwards;
animation: 1.5s slideInMirror forwards
}

.animation_title_slide_in::after{
-webkit-animation: 1.5s slideInMaskMirror forwards;
animation: 1.5s slideInMaskMirror forwards
}
.section-title.slide_in::after{
-webkit-animation: 1.5s slideInMaskMirror2 forwards;
animation: 1.5s slideInMaskMirror2 forwards
}

.animation_title_slide_in_mirror {
-webkit-animation: 1.5s slideIn forwards;
animation: 1.5s slideIn forwards
}
.animation_title_slide_in_mirror::before {
-webkit-animation: 1.5s slideInMask02 forwards;
animation: 1.5s slideInMask02 forwards
}
@-webkit-keyframes slideOut {
from {
    transform: translateX(0)
}
to {
    transform: translateX(-200%)
}
}
@keyframes slideOut {
from {
    transform: translateX(0)
}
to {
    transform: translateX(-200%)
}
}
@-webkit-keyframes slideOutMask {
from,
to {
    transform: translateX(-200%)
}
}
@keyframes slideOutMask {
from,
to {
    transform: translateX(-200%)
}
}
@-webkit-keyframes slideOutMirror {
from {
    transform: translateX(0)
}
to {
    transform: translateX(200%)
}
}
@keyframes slideOutMirror {
from {
    transform: translateX(0)
}
to {
    transform: translateX(200%)
}
}
@-webkit-keyframes slideOutMaskMirror {
from {
    transform: translateX(0)
}
to {
    transform: translateX(200%)
}
}
@keyframes slideOutMaskMirror {
from {
    transform: translateX(0)
}
to {
    transform: translateX(200%)
}
}
@-webkit-keyframes slideIn {
from {
    transform: translateX(-200%)
}
50%,
to {
    transform: translateX(0)
}
}
@keyframes slideIn {
from {
    transform: translateX(-200%)
}
50%,
to {
    transform: translateX(0)
}
}
@-webkit-keyframes slideInMirror {
from {
    transform: translateX(200%)
}
50%,
to {
    transform: translateX(0)
}
}
@keyframes slideInMirror {
from {
    transform: translateX(100%)
}
50%,
to {
    transform: translateX(0)
}
}

@-webkit-keyframes slideInMask {
50%,
from {
    transform: translateX(0)
}
to {
    transform: translateX(-50%)
}
}
@keyframes slideInMask {
50%,
from {
    transform: translateX(0)
}
to {
    transform: translateX(-50%)
}
}
@-webkit-keyframes slideInMask02 {
50%,
from {
    transform: translateX(0)
}
to {
    transform: translateX(-100%)
}
}
@keyframes slideInMask02 {
50%,
from {
    transform: translateX(0)
}
to {
    transform: translateX(-100%)
}
}
@-webkit-keyframes slideInMaskMirror {
50%,
from {
    transform: translateX(0)
}
to {
    transform: translateX(100%)
}
}
@keyframes slideInMaskMirror {
50%,
from {
    transform: translateX(0)
}
to {
    transform: translateX(100%)
}
}
@-webkit-keyframes slideInMaskMirror2 {
50%,
from {
    transform: translateX(-158px)
}
to {
    transform: translateX(50%)
}
}
@keyframes slideInMaskMirror2 {
50%,
from {
    transform: translateX(-158px)
}
to {
    transform: translateX(50%)
}
}
.fade_slide_in_left {
-webkit-animation: 1s fadeSlideOutLeft forwards;
animation: 1s fadeSlideOutLeft forwards
}
.fade_slide_in_right {
-webkit-animation: 1s fadeSlideOutRight forwards;
animation: 1s fadeSlideOutRight forwards
}
.animation_fade_slide_in_left {
-webkit-animation: 0.5s fadeSlideInLeft forwards;
animation: 0.5s fadeSlideInLeft forwards
}
.animation_fade_slide_in_right {
-webkit-animation: 0.5s fadeSlideInRight forwards;
animation: 0.5s fadeSlideInRight forwards
}
@-webkit-keyframes fadeSlideOutLeft {
from {
    transform: translateX(0);
    opacity: 1
}
to {
    transform: translateX(-30%);
    opacity: 0
}
}
@keyframes fadeSlideOutLeft {
from {
    transform: translateX(0);
    opacity: 1
}
to {
    transform: translateX(-30%);
    opacity: 0
}
}
@-webkit-keyframes fadeSlideOutRight {
from {
    transform: translateX(0);
    opacity: 1
}
to {
    transform: translateX(30%);
    opacity: 0
}
}
@keyframes fadeSlideOutRight {
from {
    transform: translateX(0);
    opacity: 1
}
to {
    transform: translateX(30%);
    opacity: 0
}
}
@-webkit-keyframes fadeSlideInLeft {
from {
    transform: translateX(-30%);
    opacity: 0
}
to {
    transform: translateX(0);
    opacity: 1
}
}
@keyframes fadeSlideInLeft {
from {
    transform: translateX(-30%);
    opacity: 0
}
to {
    transform: translateX(0);
    opacity: 1
}
}
@-webkit-keyframes fadeSlideInRight {
from {
    transform: translateX(30%);
    opacity: 0
}
to {
    transform: translateX(0);
    opacity: 1
}
}
@keyframes fadeSlideInRight {
from {
    transform: translateX(30%);
    opacity: 0
}
to {
    transform: translateX(0);
    opacity: 1
}
}