@charset "UTF-8";
#loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: var(--bg);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
#loading.show{
    animation: loader 2s forwards 2s;
}
@keyframes loader{
    0%{
        opacity: 1;
        visibility: visible;
    }
    100%{
        opacity: 0;
        visibility: hidden;
    }
}
.loading_txt{
    position: absolute;
    width: 80%;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 100%;
}
.loading_txt em{
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: 0.085em;
    font-weight: 900;
    height: 70px;
}
.loading_txt small{
    margin-top: 10px;
    font-size: 1.4rem;
    color: var(--main);
    opacity: 0;
}
#loading.show small{
    animation: anime-up 1s forwards 0.5s;
}
.anime-up{
    opacity: 0;
}
#loading.show .anime-up{
    animation: anime-up 1s forwards 0s;
}
@keyframes anime-up{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes showTextFromBottom{
    0%{
      transform: translateY( 100% );
    }
    100%{
      transform: translateY( 0px );
    }
  }
  #loading.show .anime-up span{
    animation: showText 1s backwards;
    display: inline-block;
  }
  #loading.show .anime-up > span{
    overflow: hidden;
  }
  #loading.show .anime-up > span > span{
    animation: showTextFromBottom 0.5s backwards;
  }

body#top header.show{
	animation: header_in 1.5s forwards 2.2s ;
}
body#top header.show.fixed{
    animation : header_fixed 1s forwards 0s, header_in 1.5s forwards 2.2s ;
}

#visual{
    width: 100%;
    height: 100vh;
    position: relative;
    left: 0;
    top: 0;
}
#visual .slider{
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}
#visual .slider,
#visual .slick-slider .slick-list,
#visual .slick-slider .slick-track,
#visual .slick-slider .slick-slide,
#visual .slick-slider .slick-slide img{
    height: 100%;
    min-height: 100vh;
}
#visual .slider::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 370px;
    aspect-ratio: 1 / 1;
    background: url(../images/logo_mark_d.svg) no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 1;
}
#visual .slider::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,145,236,0.4);
    pointer-events: none;
    z-index: 1;
}
#visual .slick-dots{
    bottom: 5%;
    left: 5%;
    width: auto;
    z-index: 2;
}
#visual .slick-dots li{
    margin: 0 7px;
}
#visual .slick-dots li button:before{
    border-radius: 0;
    background: #fff;
    opacity: .5;
    width: 16px;
    height: 16px;
}
#visual .slick-dots li.slick-active button:before{
    opacity: 1;
}

#visual .visual_txt{
    position: absolute;
    width: 80%;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 10px rgba(20, 78, 114, 0.5));
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px 0;
    text-align: center;
    color: #fff;
}
#visual .visual_txt h2{
    font-size: 3rem;
    line-height: 1.4;
    margin-bottom: 0;
}
#visual .visual_txt small{
    font-size: 1.4rem;
}

#visual .visual_banner{
    position: absolute;
    right: 3%;
    bottom: 5%;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(20, 78, 114, 0.5));
    width: 30%;
    max-width: 460px;
}
#visual .visual_banner .bn_recruit{
    opacity: 0;
}
#visual .visual_banner .bn_recruit.show{
    animation: fadein 0.5s forwards 3s;
}
#visual .visual_banner .bn_recruit a{
    width: 100%;
    padding: 20px 26px;
    border-radius: 10px;
    background: #fff;
    border: 5px solid #fff;
    display: block;
    text-decoration: none;
    position: relative;
}
#visual .visual_banner .bn_recruit a:hover{
    border-color: var(--rec-color);
    transform: scale(0.99);
}
#visual .visual_banner .bn_recruit a::after{
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    right: -15px;
    bottom: -15px;
    z-index: 1;
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_layer_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2026.2%2026.2%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20.st1%20%7B%20fill%3A%20%2337A561%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_layer_1-2%22%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M13.1%2C2c6.1%2C0%2C11.1%2C5%2C11.1%2C11.1s-5%2C11.1-11.1%2C11.1S2%2C19.2%2C2%2C13.1%2C7%2C2%2C13.1%2C2%22%2F%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M13.1%2C2c6.1%2C0%2C11.1%2C5%2C11.1%2C11.1s-5%2C11.1-11.1%2C11.1S2%2C19.2%2C2%2C13.1%2C7%2C2%2C13.1%2C2M13.1%2C0C5.9%2C0%2C0%2C5.9%2C0%2C13.1s5.9%2C13.1%2C13.1%2C13.1%2C13.1-5.9%2C13.1-13.1S20.4%2C0%2C13.1%2C0h0Z%22%2F%3E%20%3Cpolygon%20class%3D%22st1%22%20points%3D%2213%207.1%2011.6%208.5%2015.2%2012.1%207.2%2012.1%207.2%2014.1%2015.2%2014.1%2011.6%2017.7%2013%2019.1%2019%2013.1%2013%207.1%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all ease .3s;
}
#visual .visual_banner .bn_recruit a:hover::after{
    transform: scale(1.1);
}
#visual .visual_banner .bn_recruit a .fl_box{
    gap: 0 20px;
}
#visual .visual_banner .bn_recruit a figure{
    width: 100px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
#visual .visual_banner .bn_recruit a .txt_box{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
}
#visual .visual_banner .bn_recruit a .txt_box span{
    background: var(--rec-color);
    color: #fff;
    text-align: center;
    padding: 4px 10px;
    position: relative;
}
#visual .visual_banner .bn_recruit a .txt_box span::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width:0;
    height:0;
    border-style:solid;
    border-width: 10px 10px 0 10px;
    border-color: #37A561 transparent transparent transparent;
}
#visual .visual_banner .bn_recruit a .txt_box em{
    color: var(--rec-color);
    font-size: 1.6rem;
    text-align: center;
}

#about .about_intro{
    justify-content: flex-end;
    position: relative;
    min-height: 100vh;
}
#about .about_intro::after{
    content: "";
    position: absolute;
    left: calc(50% - 50px);
    transform: translateX(-50%);
    top: 10%;
    pointer-events: none;
    width: 350px;
    aspect-ratio: 1 / 1;
    background-image: url(../images/logo_mark_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.7;
    z-index: 1;
}
#about .about_intro .txt_box{
    max-width: 50%;
    padding: 30px 5%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#about .about_intro .txt_box .btn{
    margin-top: 60px;
}
#about .about_intro .img_box{
    width: 50%;
}
#about .about_link,
#about .about_link .fl_box{
    justify-content: space-between;
    gap: 20px;
}
#about .about_link{
    position: relative;
}
#about .about_link::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all ease .5s;
    opacity: 0;
}
#about .about_link.show::before{
    opacity: 1;
    background: var(--main);
	background: linear-gradient(90deg, rgba(var(--main-light-rgb),1) 0%,rgba(var(--main-dark-rgb),1) 100%) 0 / 200% 100%;
    animation: bg-gradient 5s linear infinite alternate;
}
@keyframes bg-gradient {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 100% 0;
	}
  }
#about .about_link a{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}
#about .about_link a img{
    transition: all ease 0.7s;
}
#about .about_link a:hover img{
    transform: scale(1.1);
}
#about .about_link a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--main-dark-rgb),0.7);
    z-index: 1;
    transition: all ease .3s;
}
#about .about_link a:hover::before{
    background: rgba(var(--main-dark-rgb),0.5);
}
#about .about_link a span{
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0 10px;
    left: 25px;
    bottom: 25px;
    text-decoration: none;
    color: #fff;
    font-size: 1.4rem;
    z-index: 2;
    transition: all ease .3s;
}
#about .about_link a span::after{
	content: "";
	position: absolute;
	width: calc(100% - 36px);
	height: 1px;
	background: #fff;
	bottom: -5px;
	left: 36px;
	transform: scale(0 ,1);
	transform-origin: right top;
	transition: transform 0.3s;
}
#about .about_link a:hover span::after{
	transform: scale(1, 1);
	transform-origin: left top;
}

#about .about_link a span::before{
    content: "";
    width: 26px;
    height: 26px;
    background: url(../images/icon_ar_w.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
#about .about_link div[data-abli="business"]{
    flex: 1;
    aspect-ratio: 3 / 2;
}
#about .about_link .r_box{
    flex: 1;
    flex-direction: column;
}
#about .about_link div[data-abli="history"] a{
    aspect-ratio: 3 / 1;
    overflow: hidden;
}

#result-activity .txt_box{
    justify-content: center;
    gap: 0 20px;
    font-size: 1.6rem;
}
#result-activity .txt_box span{
    color: var(--main);
    font-size: 2rem;
}
#result-activity .re-ac_link{
    margin-top: 60px;
    gap: 0 40px;
}
#result-activity .re-ac_link > div{
    width: 35%;
}
#result-activity .re-ac_link div[data-reac="other"]{
    width: 25%;
}
#result-activity .re-ac_link a{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    aspect-ratio: 5 / 6;
    color: #fff;
    text-decoration: none;
}
#result-activity .re-ac_link a em,
#result-activity .re-ac_link a .button_w{
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}
#result-activity .re-ac_link a em{
    font-size: 2rem;
    white-space: nowrap;
    top: 30%;
    filter: drop-shadow(0 0 10px rgba(20, 78, 114, 0.5));
}
#result-activity .re-ac_link a .button_w{
    bottom: 30%;
    display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
    border: 3px solid #fff;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
    width: 85%;
	max-width: 300px;
	min-height: 82px;
	padding: 10px;
}
#result-activity .re-ac_link a .button_w span{
	position: relative;
	z-index: 2;
}
#result-activity .re-ac_link a .button_w::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: #fff;
	border-radius: 6px;
}
#result-activity .re-ac_link a:hover .button_w::before{
	animation: btn_w_hover 0.5s forwards 0.1s;
}

#result-activity .re-ac_link a .button_w::after{
	content: "";
	position: absolute;
	right: -15px;
	bottom: -15px;
	width: 35px;
	aspect-ratio: 1 / 1;
	background: url(../images/icon_ar_w.svg) no-repeat;
    background-color: rgba(36, 36, 36,0.4);
	background-size: contain;
	background-position: center;
    border-radius: 50%;
	z-index: 1;
	transition: all ease .3s;
}
#result-activity .re-ac_link a:hover .button_w::after{
	transform: scale(1.1);
}

#result-activity .re-ac_link a figure{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#result-activity .re-ac_link a figure::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--main-dark-rgb),0.4);
    z-index: 1;
    transition: all ease .3s;
}
#result-activity .re-ac_link a:hover figure::after{
    background: rgba(var(--main-dark-rgb),0.6);
}
#result-activity .re-ac_link a img{
    transition: all ease .7s;
}
#result-activity .re-ac_link a:hover img{
    transform: scale(1.1);
}
#result-activity .re-ac_link div[data-reac="other"] a{
    aspect-ratio: auto;
}

#recruit h2 em{
    color: var(--rec-color);
}
#recruit h2 small{
    color: var(--font);
}
#recruit .slider{
    overflow: hidden;
}
#recruit .slick-list{
    overflow: visible;
}
#recruit .slick-slide{
    aspect-ratio: 1 / 1;
    overflow: hidden;
    height: 400px;
}
#recruit .wrap{
    position: relative;
    z-index: 1;
    margin-top: -40px;
}



@media screen and (max-width: 999px){
    .tb_no{
        display: none;
    }
    #loading .pc_no{
        display: block;
    }

    #visual .visual_txt h2 br.pc_no{
        display: block;
    }
    #visual .visual_banner{
        width: 50%;
    }
    #about .about_intro{
        min-height: 70vh;
    }
    #about .about_intro .txt_box{
        width: 60%;
        max-width: none;
    }
    #about .about_intro .img_box{
        width: 40%;
    }

    #about .about_link a span{
        font-size: 1.2rem;
        left: 15px;
    }
    #about .about_link div[data-abli="business"]{
        aspect-ratio: 5 / 7;
    }
    #about .about_link div[data-abli="history"]{
        height: 50%;
    }
    #about .about_link div[data-abli="history"] a{
        aspect-ratio: auto;
    }
    #about .about_link .fl_box{
        flex-grow: 1;
    }

    #result-activity .txt_box{
        font-size: 1.2rem;
    }
    #result-activity .re-ac_link{
        gap: 20px;
        flex-direction: column;
    }
    #result-activity .re-ac_link > div,
    #result-activity .re-ac_link div[data-reac="other"]{
        width: 100%;
    }
    #result-activity .re-ac_link a{
        aspect-ratio: 3 / 1;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    #result-activity .re-ac_link div[data-reac="other"] a{
        aspect-ratio: 4 / 1;
    }
    #result-activity .re-ac_link a em, #result-activity .re-ac_link a .button_w{
        position: static;
        transform: translateX(0);
    }

    #recruit .slick-slide{
        height: 300px;
    }
}

@media screen and (min-width: 0px) and (max-width: 600px){
    .loading_txt{
        top: calc(50% - 5vh);
    }
    .loading_txt em{
        font-size: 2rem;
        height: 50px;
    }
    .loading_txt small{
        font-size: 1rem;
    }

    #visual{
        height: 90vh;
    }
    #visual .slider,
    #visual .slick-slider .slick-list,
    #visual .slick-slider .slick-track,
    #visual .slick-slider .slick-slide,
    #visual .slick-slider .slick-slide img{
    height: 100%;
    min-height: 90vh;
}
    #visual .visual_txt h2{
        font-size: 2rem;
        line-height: 1.6;
    }
    #visual .visual_txt small{
        font-size: 1rem;
    }

    #visual .visual_banner{
        width: 80%;
        right: 10%;
        bottom: 10%;
    }
    #visual .visual_banner .bn_recruit a{
        padding: 15px;
    }
    #visual .visual_banner .bn_recruit a .txt_box em{
        font-size: 1.2rem;
    }
    #visual .slick-dots{
        left: 50%;
        transform: translateX(-50%);
    }
    #about .about_intro::after{
        width: 240px;
        left: auto;
        right: 5%;
        transform: translateX(0);
        top: 5%;
    }
    #about .about_intro .txt_box,
    #about .about_intro .img_box{
        width: 100%;
    }
    #about .about_intro .txt_box{
        padding: 60px 10%;
    }
    #about .about_intro .img_box{
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    #about .about_intro .img_box .img-ofi{
        object-position: center top;
    }
    #about .about_link, #about .about_link .fl_box{
        flex-direction: column;
    }
    #about .about_link a,
    #about .about_link div[data-abli="business"],
    #about .about_link div[data-abli="history"] a{
        aspect-ratio: 16 / 9;
    }
    #result-activity .txt_box{
        gap: 10px 0;
    }
    #result-activity .re-ac_link a{
        aspect-ratio: 3 / 2;
        flex-direction: column;
        justify-content: center;
        gap: 20px 0;
    }
    #result-activity .re-ac_link a em{
        font-size: 1.4rem;
    }
    #result-activity .re-ac_link div[data-reac="other"] a{
        aspect-ratio: 3 / 2;
    }
    #recruit .slick-slide{
        height: 260px;
    }
    #recruit p.ta_center{
        text-align: left;
    }
}