@charset "utf-8";

#MainVisual{position:relative}
#MainVisual .tit{padding:140px 0 80px;text-align:center}
#MainVisual .tit p{font-size:22px;font-weight:700;color:var(--dark)}
#MainVisual .tit h1{margin-top:30px;white-space:pre-line;line-height:1.3;font-size:62px;font-weight:700;color:var(--dark)}
#MainVisual .tit h1 span{color:var(--primary)}
#MainVisual .search{overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 0;background-color:var(--primary)}
#MainVisual .search .desc{margin-bottom:20px;font-size:18px;font-weight:500;color:rgba(255, 255, 255, .85);text-align:center}
#MainVisual .search .desc p{font-size:25px;font-weight:700;color:#fff}
#MainVisual .search .bg_gradient{opacity:0.8;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);width:30%;height:101%;animation:bgGradient 8s infinite linear;background:linear-gradient(to right, rgba(12, 172, 154, 0), rgba(255,255,255,.85) 50%, rgba(12, 172, 154, 0))}
#MainVisual .search form{position:relative;z-index:2;max-width:625px;width:100%;height:65px}
#MainVisual .search form input{padding-left:24px;width:100%;height:100%;border:none;border-radius:32px;font-size:15px;font-weight:400;color:#777}
#MainVisual .search form input::placeholder{color:#aaa}
#MainVisual .search form input:focus{border:none !important;outline:none !important;box-shadow:none !important}
#MainVisual .search form button{display:flex;justify-content:center;align-items:center;position:absolute;top:50%;right:12px;width:48px;height:48px;border-radius:50%;transform:translateY(-50%);border:none;color:#fff;background-color:var(--primary)}
#MainVisual .bg{position:absolute;z-index:-1;background-image:url(../main_banner/arrow_bg.png);background-repeat:no-repeat;background-size:contain;background-position:center}
#MainVisual .first{top:120px;right:25%;width:95px;height:135px}
#MainVisual .last{top:240px;left:22%;width:180px;height:220px}

@keyframes bgGradient {0% {opacity: 0.7;left:50%}20% {opacity: 0;left:50%}30% {opacity:0.7;left:50%}60% {opacity:0.7;left:60%}80% {opacity:0.7;left:40%}100% {opacity:0.7;left:50%}}

@media(max-width:1024px){
#MainVisual .tit{padding:60px 0 40px}    
#MainVisual .tit p{font-size:20px}
#MainVisual .tit h1{font-size:52px}
#MainVisual .first{top:20px;right:15%}
#MainVisual .last{top:150px;left:10%}
}
@media(max-width:768px){
#MainVisual .tit{padding:40px 0}
#MainVisual .tit p{font-size:18px}
#MainVisual .tit h1{margin-top:20px;font-size:34px}    
#MainVisual .bg{background-size: 60%;}
#MainVisual .last{top:70px}
}
@media(max-width:380px){
#MainVisual .tit h1{margin-top:20px;font-size:30px}    
}