@charset 'utf-8';
:root {
    --ti-cursor-margin-left:1em;
}
.carousel-control-prev, .carousel-control-next { display: none;}


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

/* .carousel .img-item { animation:bg-size 10s 1 both} */
.carousel .visual-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 0 10px; width: 100%; max-width: 1320px; line-height: 1.5; color: #fff; line-height: -0.02em; color: #fff;}
.carousel .img-item { background: no-repeat center / auto 120%; animation :bgSize 6s 1 both }

.visual-text { color: #fff;}
.visual-text .p1 { font-size: 6.5rem; line-height: 1.3; animation:fadeInRight 3s 1 both   }
.visual-text .p1 b { display: block;}
.visual-text .p2 { padding: 2.8rem 0 7rem ; font-size: 2rem; animation:fadeInRight 3s 1.2s 1 both    }
.visual-text a { overflow: hidden; display: inline-block; position: relative; padding: 2.4rem 4.8rem; color: inherit; font-size: 2rem;  line-height: 1; border: 1px solid #fff; animation:fadeInUp 1s 3s 1 both  }
.visual-text a span { position: relative; z-index: 2;}
.visual-text a:after { content:''; display: block; position: absolute; left: 0; top: 50%; transform: translate(-100%,-50%) ; width: 120%; height: 200%; background: rgba(255,255,255,.1);  border-radius: 0 50% 50% 0; transition: 0.3s;  }
.visual-text a:hover:after { transform: translate(0,-50%);  }

.scroll-down { position:absolute; z-index: 10; bottom:5rem; left:50%; transform: translateX(-50%); animation:fadeIn 2s 3s 1 both }
@media (max-width:991px){    
    .scroll-down { display: none;}
}
@media (max-width:768px){        
    .visual-text .p1 { font-size: 5.8rem;}
    .visual-text .p2 { padding: 3.2rem 0 7rem ;}
    .visual-text a { padding: 2.2rem 3.8rem;}
    
}
@media (max-width:576px){       
    .visual-text .p1 { font-size: 5.2rem;}
    .visual-text .p2 { padding: 3.2rem 0 5rem ;}
    .visual-text a { display: none;}
    
}
@media (max-width:440px){       
    .visual-text .p1 { font-size: 4.2rem;}
    .visual-text .p2 { font-size: 1.8rem;}
}


@keyframes fadeInRight {
    from { opacity:0; transform: translateX(-30%);}
    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: 1;}
}
@keyframes bgSize {
    from { background-size: auto 140%;}
    to { background-size: auto 120%;}
}