@charset 'utf-8';
.carousel-control-prev, .carousel-control-next { display: none;}


.carousel { position: relative;}
.carousel img {max-width: 100%;}
.carousel p { word-break: keep-all;}

.visual-img {
    transform: scale(1.2);
    animation: scale 30s 1 both;
}

.visual-text {
    position: absolute;
    left: 50%; 
    top: 50%; 
    z-index: 4;
    transform: translate(-50%,-50%);
    padding: 0 1rem;
    max-width: 1320px;
    width: 100%; 
}
.slogun {
    font-size: 3.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.6666;
    span {
        display: block;
       
    }
   
}
.carousel.on {
    .slogun span {
        &.sp1 {
            animation : fadeInRight 2s 1s 1 both;
        }
        &.sp2 {
            animation : fadeInRight 2s 1.5s 1 both;
        }
        &.sp3 {
            animation : fadeInRight 2s 2s 1 both;
        }
    }
    .go {
        animation : fadeInUp 1s 3s both;
    }
    .flow-text {
        animation:marquee 120s 4s  linear infinite,fadeIn 1s 4s 1 both;
    }
}
.visual-text .go {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    margin-top: 5rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;

    &:before {
        content:'+';
        display: flex;
        align-items: center;
        justify-content: center;            
        width: 7rem; 
        height: 7rem; 
        color: #333;
        font-size: 2.4rem;
        border-radius: 50%;
        font-weight: 300;
        background: #fff;        
        box-shadow: 0 0 0 0rem rgba(0,123,233,.12);
        transition: 0.3s;
        
    }
    &:hover{
        &:before{                 
            color: #fff;
            background: rgba(148, 51, 47, 0.75);    
            box-shadow: 0 0 0 1rem rgba(148, 51, 47, 0.3); 
            transform: rotate(90deg);
        }
    }
}
.flow-text {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    opacity: .23;
    font-size: 18rem; 
    line-height: .84;
    color: #fff;
    font-weight: 900;
    white-space: nowrap;
   
}
.carousel-item:before {
    content: '';
    opacity: .3;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
}
.visual-video {
    position: absolute; 
    z-index: 2;
    width: 100%; 
    height: 100%;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    source {
        width: 100%;
    }  
}
@media(width<=768px){
    .slogun {
        font-size: 3rem;
        line-height: 1.3;
        span + span {
            margin-top: 1.5rem;
        }
    }
    .visual-text .go{
        gap:2rem;
        &:before {
            width: 6rem; 
            height: 6rem;
        }
    }
    .flow-text {      
        font-size: 14rem;
    }
}

@media(width<=576px){
    .slogun {
        font-size: 2.8rem; 
        span + span {
            margin-top: 2rem;
        }
    }    
    .flow-text {
        font-size: 14rem;
    }
}

@media(width<=480px){
    .slogun {
        font-size: 2.4rem; 
        span + span {
            margin-top: 1.8rem;
        }
    }    
    .visual-text .go {
        gap:1.5rem;
        &:before{
            width: 5rem; 
            height: 5rem;
        }
    }
    .flow-text {
        font-size: 10rem;
    }
}








@keyframes fadeInRight {
    from{
        opacity: 0;
        transform: translateX(-15%);
    }
    to{       
        opacity: 1; 
        transform: translateX(0);
    }
}
@keyframes fadeInUp {
    from{
        opacity: 0;
        transform: translateY(50%);
    }
    to{       
        opacity: 1; 
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from{
        opacity: 0;
    }
    to{
        opacity: .12;
    }
}
@media(width<=768px){
    @keyframes fadeIn {
        from{
            opacity: 0;
        }
        to{
            opacity: .25;
        }
    }
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


@keyframes scale {
    from {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }    
}