@charset "utf-8";

#mainVisual{position:relative}
#mainVisual .main_bnr{position:relative;margin:auto;width:100%;height:100vh;background:#111}
#mainVisual .main_bnr:after{position:absolute;z-index:10;content:'';top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.5)}
#mainVisual .main_bnr .bg01{background-image:url(./main_banner01.jpg)}
#mainVisual .main_bnr .bg02{background-image:url(./main_banner02.jpg)}
#mainVisual .main_bnr .bg03{background-image:url(./main_banner03.jpg)}
#mainVisual .main_bnr .bg{width:100%;height:100vh;transform:skewX(3deg);transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1);background-size:cover}
#mainVisual .main_bnr li.on .bg{opacity:1;transform:skewX(0)}

#mainVisual .txt{position:absolute;z-index:10;bottom:17%;left:0;right:0;color:#fff}
#mainVisual .txt h2{font-size:57px;font-weight:700;line-height:1.2;white-space:pre-line;font-family:var(--e-font)}
#mainVisual .txt p{margin-top:30px;font-size:24px;font-weight:700}
#mainVisual .inner{position:relative}
#mainVisual .pager{margin-top:50px}
#mainVisual .pager span{opacity:.3;position:relative;width:40px;height:40px;margin:0 5px;background-color:transparent;transition:all .3s}
#mainVisual .pager span.on{opacity:1}
#mainVisual .pager span:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:all .3s}
#mainVisual .pager span.on:before{opacity:1;width:100%;height:100%}
#mainVisual .pager span:after{display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff}
#mainVisual .mouse{position:fixed;bottom:40px;right:40px;display:flex;gap:14px;flex-direction:column;align-items:center;width:165px;height:165px;background:var(--primary);border-radius:50%;justify-content:center;font-size:17px;font-weight:700}