@charset "UTF-8";
/* CSS Document */


@keyframes transformLeftRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}


@-webkit-keyframes ttb01 {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes ttb01 {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes ttb02 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

@keyframes ttb02 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

@-webkit-keyframes ttb01-pc {
  0% {
    transform: translateY(100%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes ttb01-pc {
  0% {
    transform: translateY(100%);
  }

  to {
    transform: translateY(-100%);
  }
}

@-webkit-keyframes ttb02-pc {
  0% {
    transform: translateY(0);
  }

  to {
    transform: translateY(-200%);
  }
}

@keyframes ttb02-pc {
  0% {
    transform: translateY(0);
  }

  to {
    transform: translateY(-200%);
  }
}

@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}


/*PC*/
@media print, screen and (min-width: 768px) {

    
/*背景固定*/
 canvas { width: 100%; height: 100%; position: fixed; top: 0; z-index: -1; opacity: .4;}
    
 canvas .bg{ -webkit-filter: blur(120px); -moz-filter: blur(120px); -ms-filter: blur(120px); filter: blur(120px); display: block; height: 100vh; width: 100%;}

    
#FV{position: relative; height: 100vh; overflow: hidden; min-width: 1400px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.3);}


    
#FV .slider_box{padding-top: 110px;}
    
#FV #slider{width: 95%;height: 100vh;margin: 0 0 0 auto;position: relative;background: #fff;}

#FV .tit_box{position: absolute;
background: #fff; top: 53%; padding: 25px 20px 25px 30px; left: 0; z-index: 5;}
    
#FV .tit_box .read_text{letter-spacing: 2px;font-size: 3rem;letter-spacing: 12px;z-index: 5;font-family: "Noto Serif JP", serif;font-optical-sizing: auto;font-weight: 600;font-style: normal;}
    
#FV .tit_box .read_text .nuru{margin: 0 10px 0 20px; font-size: 3.2rem; color: #fff; font-weight: 800;}
#FV .tit_box .read_text .img{position: absolute;  left: 53%;  top: 6%;  opacity: .6;  z-index: -1;  width: 230px;  transform: rotate(-9deg);}
    
#FV .tit_box .en{font-size: .9rem; margin-left: 8px; margin-top: 5px;}
    
#FV canvas { width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; opacity: .4;}
    
#FV canvas .bg{ -webkit-filter: blur(120px); -moz-filter: blur(120px); -ms-filter: blur(120px); filter: blur(120px); display: block; height: 100vh; width: 100%;}
  
    
    
    
   
#about {position: relative; min-width: 1400px;}
#about .bg{background: url("../images/index/about_bg.jpg") no-repeat; background-size: auto; background-size: cover; padding: 50px 0 100px; position: relative;}
#about .bg::after{content: ""; position: absolute; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, .7) 15%, #fff 100%);}
#about .content_inner .text_box{margin-top: 20px; width: 60%;}   
#about .content_inner .text_box .text{font-size: 1.2rem; line-height: 2.5; letter-spacing: 1.1px; margin-top: 30px;}
#about .content_inner .text_box .text .pop_up{position: relative;}
#about .content_inner .text_box .text .pop_up img{width: 120px; position: absolute; left: 0; bottom: -7px; z-index: -1; opacity: .6;}  
    
#about .flex_wrap_content{display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 150px auto; position: relative; z-index: 5;}
    
#about .img_box{width: 40%;}
  
#about .check_point{margin: 70px auto 230px 0; width: 400px; display: flex; justify-content: space-between;}
#about .check_point li{font-size: 1rem; position: relative;}
#about .check_point li .check_btn{font-size: .9rem; display: block; width: 100%; font-weight: 600; padding: 20px 60px 20px 40px; border-radius: 60px; box-sizing: border-box; background-image: linear-gradient(150deg, rgba(174, 162, 219, 1) 10%, rgba(103, 190, 224, 1) 90%); color: #fff;}
#about .check_point li .line{width: 210px; position: absolute; bottom: -9px; left: 0; z-index: -1; opacity: .4;}   


#about .c-arrow-link {position: relative; display: flex;}
.c-arrow-link--icon {overflow: hidden; position: absolute; top: 24%; left: 76%; bottom: 0; width: 30px; margin: auto 0; line-height: 1;}
    
#about .c-arrow-link--icon:before,
#about .c-arrow-link--icon:after { content: "→"; position: absolute; top: 4px; right: 0; animation-fill-mode: both; animation-duration: 0.6s; color: #fff; font-size: 1.5rem;}
#about .c-arrow-link--icon:after {
  transform: translateX(-100%);
}
#about .c-arrow-link.is-hover .c-arrow-link--icon:before {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}
#about .c-arrow-link.is-hover .c-arrow-link--icon:after {
  animation-name: transformRightLeft;
}
#about .c-arrow-link.is-hover:hover .c-arrow-link--icon:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
#about .c-arrow-link.is-hover:hover .c-arrow-link--icon:after {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}

#about .modal {display: none;height: 100vh;left: 0;position: fixed;top: 0;width: 100%;z-index: 100;}

#about .modal__overlay {background: rgba(0, 0, 0, 0.8);height: 100vh;position: absolute;width: 100%;}
    
#about .modal__content {background: #fff; left: 50%; padding: 30px 30px 20px 30px; position: absolute; top: 50%; transform: translate(-50%, -50%); max-width: 600px; width: 100%; z-index: 100;}
    
#about .modal__content .img {width: 100%; margin-top: 15px;}
#about .modal__content .modal_text {font-size: 1rem; margin-top: 10px;}
#about .modal__content h3{text-align: center; font-size: 1.2rem;}
#about .modal__content .border{text-align: center; margin: -33px auto 0; display: block; position: relative; z-index: -1; opacity: .5;}
#about .modal__content .border img{width: 400px;}
#about .modal__content .back_btn{text-align: right; margin-top: 10px;}  
.fixed_modal {height: 100%;position: fixed;width: 100%;} 
#about .modal__content .marker{background: linear-gradient(transparent 50%, #ffd36a 50%);}
#about .modal__content .add{font-size: .9rem;
    margin-top: 4px;
    padding: 10px;
    box-sizing: border-box;}
.batsu{position: relative; width: 40px; height: 40px; display: inline-block; border: solid 1px #333; border-radius: 50px; padding: 3px; box-sizing: border-box;}
.batsu::before, .batsu::after {content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 23px; background: #333;}
.batsu::before {transform: translate(-50%,-50%) rotate(45deg);}
.batsu::after {transform: translate(-50%,-50%) rotate(-45deg);}  
   
/*---merit------*/
  

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
.eachTextAnime.appeartext span.num{ margin-left: 5px; }
    
#merit{padding: 150px 0; min-width: 1400px; background: #fff;}
#merit .section_tit{text-align: center; font-size: 2.2rem;}
    
#merit .cont_tit{font-size: 2rem;}
#merit .cont_tit .point{display: block; font-size: 2.2rem; background: linear-gradient(150deg, rgb(174, 162, 219) 10%, rgb(103, 190, 224) 90%); background-clip: border-box; background-clip: border-box; background-clip: border-box; color: #0b2e74; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px;}
#merit .text{font-size: 1.1rem; margin-top: 30px;}
    
    
#merit .cont01{width: 94%; margin: 50px 0 0 auto;  box-sizing: border-box; position: relative;}

#merit .cont01 .text_box{position: absolute; z-index: 3; top: 0; background: #fff; padding: 40px 40px 60px 40px;}
#merit .cont01 .slide_box{width: 80%; position: relative; height: 900px; overflow: hidden; margin: 0 0 0 auto; z-index: 2;}
#merit .cont01 .slide_box .concept-company__slider--wrapper{height: 600px;}
#merit .cont01 .slide_box::before{content: ""; display: block; background: rgba(0, 0, 0, .3); width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; right: 0; top: 0;} 

#merit .cont01 .concept-company__slider { display: flex; width: 95%; margin-left: 0; position: relative;}

#merit .cont01 .concept-company__slide {flex: 0 0 35%;}
#merit .cont01 .concept-company__slide.-ttb .slide__container:first-child { -webkit-animation: ttb01-pc 40s -20s linear infinite;   animation: ttb01-pc 40s -20s linear infinite;}
#merit .cont01 .concept-company__slide.-ttb .slide__container:last-child {-webkit-animation: ttb02-pc 40s linear infinite; animation: ttb02-pc 40s linear infinite;}
#merit .cont01 .concept-company__slide.-btt .slide__container:first-child {animation: ttb01-pc 40s -20s linear infinite reverse;}
#merit .cont01 .concept-company__slide.-btt .slide__container:last-child {animation: ttb02-pc 40s linear infinite reverse;}
#merit .cont01 .concept-company .slide__container {padding: 0;margin: 0;list-style: none;}
#merit .cont01 .font{font-size: 10rem; line-height: 1; font-weight: 400; letter-spacing: 0.03em; color: #fff; position: absolute; bottom: -10px; z-index: 3; right: -10px; opacity: .4; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(-180deg);}
    
    
#merit .cont02{width: 94%; margin: 180px auto 0 0; box-sizing: border-box; position: relative; right: 0; z-index: 2;}

#merit .cont02 .text_box{position: absolute; z-index: 3; top: 0; background: #fff; padding: 40px 40px 60px 40px; right: 0;}

#merit .cont02 .img_box{width: 90%; position: relative; height: 950px; overflow: hidden; margin: 0 auto 0 0; background: url("../images/index/merit02.jpg"); background-size: auto; background-size: cover; background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;}

#merit .cont02 .img_box::before{content: ""; display: block; background: rgba(0, 0, 0, .3); width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; right: 0; top: 0;}
#merit .cont02 .qualification .table_box table {width: 100%;margin: 10px auto 0;border-top: 1px solid #dcdcdc;}
#merit .cont02 .qualification .table_box table th { border-bottom: 1px solid #dcdcdc; width: 30%; padding: 10px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; text-align: left; background: #f6f6f6; vertical-align: middle; color: #000;} 
#merit .cont02 .table_box table td { border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px;}
 
#merit .cont02 .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 80px 5% 0 10%;}
  
#merit .cont02 .flex_wrap .flex_item{border: solid 2px #ddd; padding: 20px; box-sizing: border-box; border-radius: 40px;}
#merit .cont02 .flex_wrap .qualification .icon{width: 50px; text-align: center; margin: 0px auto 5px; position: relative; height: 50px;}
#merit .cont02 .flex_wrap .meister .icon{width: 75px; text-align: center; margin: 0px auto 5px; position: relative; height: 50px;}
    
#merit .cont02 .flex_wrap .flex_item h3{font-size: 1.3rem; text-align: center; font-weight: 700;}
#merit .cont02 .flex_wrap .flex_item .top_text{font-size: 1rem; margin-top: 20px;}

#merit .cont02 .font {font-size: 10rem; line-height: 1; font-weight: 400; letter-spacing: 0.03em; color: #fff; position: absolute; bottom: -12px; z-index: 3; left: -12px; opacity: .4; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}
    
    
/*---qualification----*/
    
#qualification{min-width: 1400px;}
    
#qualification .cont01 .flex_wrap{display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
margin: 0 auto;}
    
#qualification .cont01 .flex_wrap .text_box{width: 50%;
box-sizing: border-box; padding: 80px 3%; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.5);}
#qualification .cont01 .flex_wrap .text_box h3{font-size: 1.6rem; text-align: center; margin-top: 15px; line-height: 1;}
#qualification .cont01 .flex_wrap .text_box .icon{width: 60px; margin: 0 auto;}
#qualification .cont01 .flex_wrap .text_box .top_text{font-size: 1rem;
text-align: center; margin: 15px 0 0;}
#qualification .cont01 .flex_wrap .text_box .table_box{margin-top: 30px;}
#qualification .cont01 .flex_wrap .img_box{width: 50%; background: url("../images/index/qualification.jpg"); background-size: cover;}    
#qualification .cont01 .table_box table {width: 100%;margin: 10px auto 0;border-top: 1px solid #dcdcdc;}
#qualification .cont01 .table_box table th { border-bottom: 1px solid #dcdcdc; width: 30%; padding: 10px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; text-align: left; background: #f6f6f6; vertical-align: middle; color: #000;} 
#qualification .cont01 .table_box table td { border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px; background: #fff;}
 
#qualification .cont01 .flex_wrap .text_box .bottom_text{background: rgb(246, 246, 246); padding: 30px; box-sizing: border-box; margin-top: 30px; border-radius: 30px; background: #fff;}
    
#qualification .cont02 .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; margin: 0 auto; flex-direction: row-reverse;}
    
#qualification .cont02 .flex_wrap .text_box{width: 50%; box-sizing: border-box; padding: 80px 3% 70px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.4);}
#qualification .cont02 .flex_wrap .text_box h3{font-size: 1.6rem; text-align: center; margin-top: 15px; line-height: 1;}
#qualification .cont02 .flex_wrap .text_box .icon{width: 70px; margin: 0 auto;}
#qualification .cont02 .flex_wrap .text_box .top_text{font-size: 1rem;
text-align: center; margin: 15px 0 0;}
#qualification .cont02 .flex_wrap .text_box .table_box{margin-top: 30px;}
#qualification .cont02 .flex_wrap .img_box{width: 50%; background: url("../images/index/qualification_02.jpg"); background-size: cover;}    
#qualification .cont02 .table_box table {width: 100%;margin: 10px auto 0;border-top: 1px solid #dcdcdc;}
#qualification .cont02 .table_box table th { border-bottom: 1px solid #dcdcdc; width: 30%; padding: 10px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; text-align: left; background: #f6f6f6; vertical-align: middle; color: #000;} 
#qualification .cont02 .table_box table td { border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px;}
 
#qualification .cont02 .flex_wrap .text_box .bottom_text{background: rgb(246, 246, 246); padding: 30px; box-sizing: border-box; margin-top: 30px; border-radius: 30px;}
    

#qualification .cont02 .box02{padding: 30px 30px; margin: 40px auto 0; border-radius: 20px; box-sizing: border-box; background: #fff;}
#qualification .cont02 .box02 h4{ text-align: center; box-sizing: border-box; font-size: 1.2rem; position: relative; padding-top: 10px;}
#qualification .cont02 .box02 h4::before{content: ""; background: #021741; width: 80px; height: 1px;  position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); top: 0;}
#qualification .cont02 .box02 .img{margin-top: 10px;}

#qualification .cont02 .box02 .text{font-size: .9rem; margin-top: 15px;}
    

    
    
/*---meister----*/
    /*
#meister{padding-bottom: 200px; padding-top: 150px; position: relative;}
    
#meister::after{content: ""; background: #fff; width: 100%; height: 86%; position: absolute; bottom: 0; z-index: 1;}
    
#meister .content_inner{position: relative; z-index: 2;  margin: 0 auto;}
    
#meister .box01 .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse;}
#meister .box01 .flex_wrap .text_box{width: 60%;
    padding: 120px 3% 70px;
    box-sizing: border-box;
    font-size: 1.1rem;}
#meister .box01 .flex_wrap .img{}
#meister .box01 .text{font-size: 1.1rem; margin-top: 25px;}
   
#meister .box01 h2{font-size: 2.2rem;}  
#meister .box01 .img_box{background: url("../images/index/about_img01.jpg"); background-size: cover; width: 40%;}

#meister .box02{padding: 40px 30px; margin: 40px auto 0; border-radius: 20px; box-sizing: border-box; background-image: linear-gradient(150deg, rgba(174, 162, 219, 1) 10%, rgba(103, 190, 224, 1) 90%);}
#meister .box02 h3{ color: #fff; text-align: center; box-sizing: border-box; font-size: 1.2rem; position: relative; padding-top: 10px;}
#meister .box02 h3::before{content: ""; background: #fff; width: 80px; height: 1px;  position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); top: 0;}
#meister .box02 .img{margin-top: 10px;}

#meister .box02 .text{color: #fff; font-size: 1rem; margin-top: 15px;}*/
    
    
/*---career----*/
    
#career{padding: 200px 0 80px 0; position: relative; min-width: 1400px; background: #fff;}
#career::after{display: block; content: ""; position: absolute; left: 0; top: 0; width: 1160px; height: 72%; background: #fff; z-index: 1;}
#career .top_text h2{font-size: 2.2rem;}
#career .career_bg{width: 50%; margin: 0 0 0 auto; position: relative; z-index: 1; background: url("../images/index/career_bg.jpg"); background-size: auto; background-size: cover; height: 1100px;}

#career .content{ position: absolute; top: 14%; left: 5%; z-index: 2;}

#career .content .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; width: 1000px; box-sizing: border-box; position: relative; z-index: 2; margin-top: 60px;}
#career .content .flex_wrap .flex_item{width: 48%;}
    
#career .content .top_text{position: relative; z-index: 2; padding-top: 50px;}
#career .content .top_text h3{font-size: 2rem;}
#career .content .top_text .text{font-size: 1.3rem; margin-top: 20px;} 
#career .content .flex_wrap .flex_item{position: relative;}
#career .content .flex_wrap .flex_item .job_text_box{position: absolute; bottom: 5%; left: 5%;}
    
#career .flex_wrap .flex_item .job{position: absolute; bottom: 5%; right: 5%; z-index: 15; color: #fff; width: 90%;}
#career .flex_wrap .flex_item .job .tit{font-size: 1.2rem; line-height: 1.6;}
#career .flex_wrap .flex_item .job h3{font-size: 1.8rem; margin-top: 5px;}
#career .flex_wrap .flex_item .job_text{font-size: .9rem; margin-top: 5px;}  
    
#career .flex_wrap .flex_item a{display: block; width: 100%; height: 100%;}

#career .flex_wrap .flex_item .image{position: relative; overflow: hidden; border-radius: 10px; }
    
#career .flex_wrap .flex_item .image::after{bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(to bottom, rgba(0, 164, 180, 0), rgba(0, 0, 0, 0.6)); content: ""; z-index: 1; position: absolute; z-index: 5;}

#career .flex_wrap .flex_item .image img{position: relative;z-index: 2; border-radius: 10px;  height: auto; transition: transform .6s ease; /* ゆっくり変化させる */}
#career .flex_wrap .flex_item .image:hover .bg{transform: scale(1.1); /* 拡大 */}
     
#career .flex_wrap .flex_item .text_bg{width:100%; height:	100%; position:absolute;/* 絶対位置指定 */ top:0;
left:0; opacity:0;/* マスクを表示しない */background-color:rgba(0, 0, 0, 0.4);/* マスクは半透明 */ -webkit-transition:all 0.2s ease; transition:all 0.2s ease; z-index: 8; color: #fff; font-size: 1.3rem;}  
#career .flex_wrap .flex_item .image:hover .text_bg{opacity:1;	/* マスクを表示する */ }
#career .flex_wrap .flex_item .text_bg p{font-size: 1.2rem; color: #fff; position: absolute; top: 38%;  left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
   
#parson .cont01{width: 100%; margin: 0 auto; padding: 100px;box-sizing: border-box; background: url("../images/index/career_img03.jpg") center; background-size: cover; position: relative;}
#parson .cont01::after{content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: z; position: absolute; top: 0; left: 0;}
#parson .cont01 .text_box{text-align: center; color: #fff; position: relative; z-index: 2;}
#parson .cont01 h2{font-size: 1.6rem;}
#parson .cont01 .text{font-size: 1.1rem; margin-top: 35px; line-height: 3;}

    
    
#message {min-width: 1400px; background: #fff; padding: 180px 0;}
#message .content_inner{position: relative;}
#message .content_inner .img_box{width: 70%; border-radius: 20px; margin: 0 0 0 auto; position: relative;} 
  
#message .img_box .text_box{position: absolute; top: 25%; left: -32%; background: #fff; padding: 60px; box-sizing: border-box;} 
#message .img_box .text_box .text{font-size: 1.6rem; margin-top: 35px; letter-spacing: 1.5px;}
#message .img_box .text_box a.btn_04{margin: 40px 0 0 0;}

    

#interview{backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.4);
    padding: 150px 0;}
#interview h2{text-align: center; font-size: 2rem;}
    
#interview .interview_list{display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 30px auto; align-items: center;}
 
#interview .interview_list li{width: 31%; background: #fff; padding: 30px 10px 10px 10px; box-sizing: border-box; border-radius: 10px 10px 50px 10px;}
#interview .interview_list li.mt70{margin-top: 120px;}
#interview .interview_list li:hover h3{color: rgb(163,166,220); }
#interview .interview_list li h3{font-size: 1.4rem; line-height: 1.6; transition: 0.5s; font-weight: 600;} 
#interview .interview_list li .img{border-radius: 0 0 50px 0;}
#interview .interview_list li .text_box{width: 90%; margin: 0 auto;}
#interview .interview_list li .text_box .name{margin-top: 70px; font-size: 1.4rem; line-height: 1.6;}
#interview .interview_list li .text_box .name span{display: block; font-size: 1rem;}
#interview .interview_list li .img{margin-top: 10px; overflow: hidden;} 
#interview a.btn_04 {margin: 80px auto 0;}
    
#entry{}

#entry .section_tit{text-align: center; font-size: 2.3rem; line-height: 1.5;}
#entry .section_tit span{display: block; font-size: 1.4rem;}   
    
#entry .btn{ font-size: 2.5rem; font-family: inherit; position: relative; overflow: hidden; z-index: 1; transition: 0.6s; display: block; border: #2c9caf; padding: 100px 0; background-color: #2c9caf;}
    
#entry .btn:hover {color: #ffffff;transform: scale(1.1);outline: 2px solid #70bdca;box-shadow: 4px 5px 17px -4px #268391;transition: 0.6s;}

/*#entry .btn::before { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: #2c9caf; z-index: -1; transition: width 1000ms;}*/

#entry .btn:hover::before {
  width: 250%;
}
    
    
    
    

}


/*sp*/
@media only screen and (max-width: 767px) {
 
 
/*背景固定*/
 canvas { width: 100%; height: 100%; position: fixed; top: 0; z-index: -1; opacity: .4;}
    
 canvas .bg{ -webkit-filter: blur(120px); -moz-filter: blur(120px); -ms-filter: blur(120px); filter: blur(120px); display: block; height: 100vh; width: 100%;}

    
#FV{position: relative; height: 100vh; overflow: hidden; backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.3);}
    
#FV .slider_box{padding-top: 70px;}
    
#FV #slider{width: 95%;height: 100vh;margin: 0 0 0 auto;position: relative;background: #fff;}

#FV .tit_box{position: absolute;
background: #fff; top: 53%; padding: 4% 5% 4% 6%; left: 0; z-index: 5;}
    
#FV .tit_box .read_text{letter-spacing: 2px;font-size: 7vw;letter-spacing: 12px;z-index: 5;font-family: "Noto Serif JP", serif;font-optical-sizing: auto;font-weight: 600;font-style: normal;}
    
#FV .tit_box .read_text .nuru{margin: 0 3%; font-size: 7vw; color: #fff; font-weight: 800;}
#FV .tit_box .read_text .img{position: absolute; left: 0; top: 29%; opacity: .6; z-index: -1; width: 38vw; transform: rotate(-9deg);}
    
#FV .tit_box .en{font-size: 3vw; margin-top: 5px;}
    
#FV canvas { width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; opacity: .4;}
    
#FV canvas .bg{ -webkit-filter: blur(120px); -moz-filter: blur(120px); -ms-filter: blur(120px); filter: blur(120px); display: block; height: 100vh; width: 100%;}
  
   
#about {position: relative;}
#about .bg{background: url("../images/index/about_bg.jpg") no-repeat; background-size: auto; background-size: cover; padding: 50px 0 150px; position: relative;}
#about .bg::after{content: ""; position: absolute; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, .7) 15%, #fff 100%);}
#about .content_inner{}
#about .content_inner h2{font-size: 1.6rem;}
#about .content_inner .text_box{margin-top: 20px;}   
#about .content_inner .text_box .text{font-size: 1rem; line-height: 2.5; letter-spacing: 1.1px; margin-top: 30px;}
#about .content_inner .text_box .text .pop_up{position: relative;}
#about .content_inner .text_box .text .pop_up img{width: 120%; position: absolute; left: 0; bottom: -7px; z-index: -1; opacity: .6;}  
    
#about .flex_wrap_content{width: 96%; margin: 0 auto; position: relative; z-index: 5;}
    
  
#about .check_point{margin: 40px auto 90px 0; width: 100%;}
#about .check_point li{font-size: 1rem; position: relative; margin-top: 15px;}
#about .check_point li .check_btn{font-size: .9rem; display: block; width: 100%; font-weight: 600; padding: 20px 60px 20px 30px; border-radius: 60px; box-sizing: border-box; background-image: linear-gradient(150deg, rgba(174, 162, 219, 1) 10%, rgba(103, 190, 224, 1) 90%); color: #fff;}
#about .check_point li .line{width: 210px; position: absolute; bottom: -9px; left: 0; z-index: -1; opacity: .4;}   


#about .c-arrow-link {position: relative; display: flex;}
.c-arrow-link--icon {overflow: hidden; position: absolute; top: 24%; right: 8%; bottom: 0; width: 30px; margin: auto 0; line-height: 1;}
    
#about .c-arrow-link--icon:before,
#about .c-arrow-link--icon:after { content: "→"; position: absolute; top: 4px; right: 0; animation-fill-mode: both; animation-duration: 0.6s; color: #fff; font-size: 1.5rem;}
#about .c-arrow-link--icon:after {
  transform: translateX(-100%);
}
#about .c-arrow-link.is-hover .c-arrow-link--icon:before {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}
#about .c-arrow-link.is-hover .c-arrow-link--icon:after {
  animation-name: transformRightLeft;
}
#about .c-arrow-link.is-hover:hover .c-arrow-link--icon:before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
#about .c-arrow-link.is-hover:hover .c-arrow-link--icon:after {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}

#about .modal {display: none;height: 100vh;left: 0;position: fixed;top: 0;width: 100%;z-index: 100;}

#about .modal__overlay {
  display: block;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow-y: scroll;}
    
#about .modal__content {width: 90%;
    padding: 50px 30px 60px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 15px;
    top: 8%;
    position: relative;
    margin: auto;}
    
#about .modal__content .img {width: 100%; margin-top: 15px;}
#about .modal__content .modal_text {font-size: 1rem; margin-top: 10px;}
#about .modal__content h3{text-align: center; font-size: 1.2rem;}
#about .modal__content .border{text-align: center; margin: -33px auto 0; display: block; position: relative; z-index: -1; opacity: .5;}
#about .modal__content .border img{width: 100%x;}
#about .modal__content .back_btn{text-align: right; margin-top: 10px;}  
.fixed_modal {height: 100%;position: fixed;width: 100%;} 
#about .modal__content .marker{background: linear-gradient(transparent 50%, #ffd36a 50%);}
#about .modal__content .add{font-size: .9rem;
    margin-top: 4px;
    padding: 10px;
    box-sizing: border-box;}
.batsu{position: relative; width: 40px; height: 40px; display: inline-block; border: solid 1px #333; border-radius: 50px; padding: 3px; box-sizing: border-box;}
.batsu::before, .batsu::after {content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 23px; background: #333;}
.batsu::before {transform: translate(-50%,-50%) rotate(45deg);}
.batsu::after {transform: translate(-50%,-50%) rotate(-45deg);}  
   
/*---merit------*/
  

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
.eachTextAnime.appeartext span.num{ margin-left: 5px; }
    
#merit{padding: 150px 0; background: #fff;}
#merit .section_tit{font-size: 1.6rem; margin-left: 3%;}
    
#merit .cont_tit{font-size: 1.4rem;}
#merit .cont_tit .point{display: block; font-size: 1.5rem; background: linear-gradient(150deg, rgb(174, 162, 219) 10%, rgb(103, 190, 224) 90%); background-clip: border-box; background-clip: border-box; background-clip: border-box; color: #0b2e74; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#merit .text{font-size: 1rem; margin-top: 30px;}
    
    
#merit .cont01{width: 97%; margin: 50px 0 0 auto;  box-sizing: border-box; position: relative;}

#merit .cont01 .text_box{background: #fff;}
#merit .cont01 .slide_box{width: 100%; position: relative;  overflow: hidden; margin: 20px 0 0 auto; z-index: 2; height: 500px;}
#merit .cont01 .slide_box .concept-company__slider--wrapper{height: 600px;}
#merit .cont01 .slide_box::before{content: ""; display: block; background: rgba(0, 0, 0, .3); width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; right: 0; top: 0;} 

#merit .cont01 .concept-company__slider { display: flex; width: 100%; margin-left: 0; position: relative;}

#merit .cont01 .concept-company__slide {flex: 0 0 50%;}
#merit .cont01 .concept-company__slide.-ttb .slide__container:first-child { -webkit-animation: ttb01-pc 40s -20s linear infinite;   animation: ttb01-pc 40s -20s linear infinite;}
#merit .cont01 .concept-company__slide.-ttb .slide__container:last-child {-webkit-animation: ttb02-pc 40s linear infinite; animation: ttb02-pc 40s linear infinite;}
#merit .cont01 .concept-company__slide.-btt .slide__container:first-child {animation: ttb01-pc 40s -20s linear infinite reverse;}
#merit .cont01 .concept-company__slide.-btt .slide__container:last-child {animation: ttb02-pc 40s linear infinite reverse;}
#merit .cont01 .concept-company .slide__container {padding: 0;margin: 0;list-style: none;}
#merit .cont01 .font{font-size: 6rem; line-height: 1; font-weight: 400; letter-spacing: 0.03em; color: #fff; position: absolute; bottom: -10px; z-index: 3; right: -10px; opacity: .4; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; transform: rotate(-180deg);}
    
    
#merit .cont02{width: 94%; margin: 80px 3% 0; box-sizing: border-box; position: relative; right: 0; z-index: 2;}

#merit .cont02 .text_box{z-index: 3; background: #fff;}

#merit .cont02 .img_box{position: relative;
    height: 500px;
    overflow: hidden;
    margin: 20px auto 0 0; background: url("../images/index/merit02.jpg"); background-size: auto; background-size: cover; 
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;}

#merit .cont02 .img_box::before{content: ""; display: block; background: rgba(0, 0, 0, .3); width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; right: 0; top: 0;}
#merit .cont02 .qualification .table_box table {width: 100%;margin: 10px auto 0;border-top: 1px solid #dcdcdc;}
#merit .cont02 .qualification .table_box table th { border-bottom: 1px solid #dcdcdc; width: 30%; padding: 10px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; text-align: left; background: #f6f6f6; vertical-align: middle; color: #000;} 
#merit .cont02 .table_box table td { border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px;}
 
#merit .cont02 .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; margin: 80px 5% 0 10%;}
  
#merit .cont02 .flex_wrap .flex_item{border: solid 2px #ddd; padding: 20px; box-sizing: border-box; border-radius: 40px;}
#merit .cont02 .flex_wrap .qualification .icon{width: 50px; text-align: center; margin: 0px auto 5px; position: relative; height: 50px;}
#merit .cont02 .flex_wrap .meister .icon{width: 75px; text-align: center; margin: 0px auto 5px; position: relative; height: 50px;}
    
#merit .cont02 .flex_wrap .flex_item h3{font-size: 1.3rem; text-align: center; font-weight: 700;}
#merit .cont02 .flex_wrap .flex_item .top_text{font-size: 1rem; margin-top: 20px;}

#merit .cont02 .font {font-size: 6rem; line-height: 1; font-weight: 400; letter-spacing: 0.03em; color: #fff; position: absolute; bottom: -12px; z-index: 3; left: -12px; opacity: .4; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}
    
    
/*---qualification----*/
    
#qualification{}
    
#qualification .cont01 .flex_wrap{margin: 0 auto;}
    
#qualification .cont01 .flex_wrap .text_box{
box-sizing: border-box; padding: 60px 3%; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.5);}
#qualification .cont01 .flex_wrap .text_box h3{font-size: 1.4rem; text-align: center; margin-top: 15px; line-height: 1;}
#qualification .cont01 .flex_wrap .text_box .icon{width: 50px; margin: 0 auto;}
#qualification .cont01 .flex_wrap .text_box .top_text{font-size: 1rem;
text-align: center; margin: 15px 0 0;}
#qualification .cont01 .flex_wrap .text_box .table_box{margin-top: 30px;}
#qualification .cont01 .flex_wrap .img_box{background: url("../images/index/qualification.jpg");
    background-size: auto;
    background-size: cover;
    height: 450px;}    
#qualification .cont01 .table_box table {width: 100%;margin: 10px auto 0;border-top: 1px solid #dcdcdc;}
#qualification .cont01 .table_box table th { border-bottom: 1px solid #dcdcdc; width: 30%; padding: 10px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; text-align: left; background: #f6f6f6; vertical-align: middle; color: #000;} 
#qualification .cont01 .table_box table td { border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px; background: #fff;}
 
#qualification .cont01 .flex_wrap .text_box .bottom_text{background: rgb(246, 246, 246); padding: 30px; box-sizing: border-box; margin-top: 30px; border-radius: 30px; background: #fff;}
    
#qualification .cont02 .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; margin: 0 auto;}
    
#qualification .cont02 .flex_wrap .text_box{padding: 60px 3% 70px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.5);}
#qualification .cont02 .flex_wrap .text_box h3{font-size: 1.3rem; text-align: center; margin-top: 15px; line-height: 1.5;}
#qualification .cont02 .flex_wrap .text_box .icon{width: 70px; margin: 0 auto;}
#qualification .cont02 .flex_wrap .text_box .top_text{font-size: 1rem;
text-align: center; margin: 15px 0 0;}
#qualification .cont02 .flex_wrap .text_box .table_box{margin-top: 30px;}
#qualification .cont02 .flex_wrap .img_box{width: 100%; background: url("../images/index/qualification_02.jpg"); background-size: cover; height: 450px;}    
#qualification .cont02 .table_box table {width: 100%;margin: 10px auto 0;border-top: 1px solid #dcdcdc;}
#qualification .cont02 .table_box table th { border-bottom: 1px solid #dcdcdc; width: 30%; padding: 10px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; text-align: left; background: #f6f6f6; vertical-align: middle; color: #000;} 
#qualification .cont02 .table_box table td { border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 10px;}
 
#qualification .cont02 .flex_wrap .text_box .bottom_text{background: rgb(246, 246, 246); padding: 30px; box-sizing: border-box; margin-top: 30px; border-radius: 30px;}
    

#qualification .cont02 .box02{padding: 30px 30px; margin: 40px auto 0; border-radius: 20px; box-sizing: border-box; background: #fff;}
#qualification .cont02 .box02 h4{ text-align: center; box-sizing: border-box; font-size: 1.2rem; position: relative; padding-top: 10px;}
#qualification .cont02 .box02 h4::before{content: ""; background: #021741; width: 80px; height: 1px;  position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); top: 0;}
#qualification .cont02 .box02 .img{margin-top: 10px;}

#qualification .cont02 .box02 .text{font-size: .9rem; margin-top: 15px;}
    

    
    
/*---meister----*/
    /*
#meister{padding-bottom: 200px; padding-top: 150px; position: relative;}
    
#meister::after{content: ""; background: #fff; width: 100%; height: 86%; position: absolute; bottom: 0; z-index: 1;}
    
#meister .content_inner{position: relative; z-index: 2;  margin: 0 auto;}
    
#meister .box01 .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse;}
#meister .box01 .flex_wrap .text_box{width: 60%;
    padding: 120px 3% 70px;
    box-sizing: border-box;
    font-size: 1.1rem;}
#meister .box01 .flex_wrap .img{}
#meister .box01 .text{font-size: 1.1rem; margin-top: 25px;}
   
#meister .box01 h2{font-size: 2.2rem;}  
#meister .box01 .img_box{background: url("../images/index/about_img01.jpg"); background-size: cover; width: 40%;}

#meister .box02{padding: 40px 30px; margin: 40px auto 0; border-radius: 20px; box-sizing: border-box; background-image: linear-gradient(150deg, rgba(174, 162, 219, 1) 10%, rgba(103, 190, 224, 1) 90%);}
#meister .box02 h3{ color: #fff; text-align: center; box-sizing: border-box; font-size: 1.2rem; position: relative; padding-top: 10px;}
#meister .box02 h3::before{content: ""; background: #fff; width: 80px; height: 1px;  position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); top: 0;}
#meister .box02 .img{margin-top: 10px;}

#meister .box02 .text{color: #fff; font-size: 1rem; margin-top: 15px;}*/
    
    
/*---career----*/
    
#career{padding: 80px 0 80px 0; position: relative; background: #fff;}
#career .top_text h2{font-size: 1.6rem;}
#career .career_bg{width: 100%; margin: 0 0 0 auto; position: relative; z-index: 1; background: url("../images/index/career_bg.jpg"); background-size: auto; background-size: cover; }

#career .content{ z-index: 2; width: 96%; margin: 0 auto;}

#career .content .flex_wrap{position: relative; z-index: 2;}
#career .content .flex_wrap .flex_item{width: 48%;}
    
#career .content .top_text{position: relative; z-index: 2; padding-top: 50px;}
#career .content .top_text h3{font-size: 2rem;}
#career .content .top_text .text{font-size: 1.2rem; margin-top: 20px;} 
#career .content .flex_wrap .flex_item{position: relative;}
#career .content .flex_wrap .flex_item .job_text_box{position: absolute; bottom: 5%; left: 5%;}
    
#career .flex_wrap .flex_item .job{position: absolute; bottom: 5%; right: 5%; z-index: 15; color: #fff; width: 90%;}
#career .flex_wrap .flex_item .job .tit{font-size: 1rem; line-height: 1.6;}
#career .flex_wrap .flex_item .job h3{font-size: 1.5rem;}
#career .flex_wrap .flex_item .job_text{font-size: .9rem;}  
    
#career .flex_wrap .flex_item a{display: block; width: 100%; height: 100%;}

#career .flex_wrap .flex_item .image{position: relative; overflow: hidden; border-radius: 10px; margin-top: 25px;}
    
#career .flex_wrap .flex_item .image::after{bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(to bottom, rgba(0, 164, 180, 0), rgba(0, 0, 0, 0.6)); content: ""; z-index: 1; position: absolute; z-index: 5;}

#career .flex_wrap .flex_item .image img{position: relative;z-index: 2; border-radius: 10px;  height: auto; transition: transform .6s ease; /* ゆっくり変化させる */}
     
#career .flex_wrap .flex_item .text_bg{width:100%; height:	100%; position:absolute;/* 絶対位置指定 */ top:0;
left:0; opacity:0;/* マスクを表示しない */background-color:rgba(0, 0, 0, 0.4);/* マスクは半透明 */ -webkit-transition:all 0.2s ease; transition:all 0.2s ease; z-index: 8; color: #fff; font-size: 1.3rem;}  

#career .flex_wrap .flex_item .text_bg p{font-size: 1.2rem; color: #fff; position: absolute; top: 38%;  left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
   
#parson .cont01{width: 100%; margin: 0 auto; padding: 100px 3%;box-sizing: border-box; background: url("../images/index/career_img03.jpg") center; background-size: cover; position: relative;}
#parson .cont01::after{content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: z; position: absolute; top: 0; left: 0;}
#parson .cont01 .text_box{color: #fff; position: relative; z-index: 2;}
#parson .cont01 h2{font-size: 1.6rem;}
#parson .cont01 .text{font-size: 1rem; margin-top: 35px; line-height: 3;}

    
    
#message {background: #fff;}
#message .content_inner{position: relative;}
#message .content_inner .img_box{border-radius: 20px; margin: 0 0 0 auto; position: relative;} 
  
#message .img_box .text_box{background: #fff; padding: 60px 3%; box-sizing: border-box;} 
#message .img_box .text_box .section_tit{font-size: 1.6rem;}
#message .img_box .text_box .text{font-size: 1.2rem; margin-top: 25px; letter-spacing: 1.5px;}
#message .img_box .text_box a.btn_04{margin: 40px 0 0 0;}

    

#interview{backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.5); padding: 130px 0;}
#interview h2{font-size: 1.6rem; margin-left: 3%; text-align: center;}
    
#interview .interview_list{display: flex; flex-wrap: wrap; justify-content: space-between; width: 94%; margin: 0px auto; align-items: center;}
 
#interview .interview_list li{background: #fff; padding: 30px 10px 10px 10px; box-sizing: border-box; border-radius: 10px 10px 50px 10px; margin-top: 30px;}
#interview .interview_list li:hover h3{color: rgb(163,166,220); }
#interview .interview_list li h3{font-size: 1.2rem; line-height: 1.6; transition: 0.5s; font-weight: 600;} 
#interview .interview_list li .img{border-radius: 0 0 50px 0;}
#interview .interview_list li .text_box{width: 90%; margin: 0 auto;}
#interview .interview_list li .text_box .name{margin-top: 20px; font-size: 1.3rem; line-height: 1.6;}
#interview .interview_list li .text_box .name span{display: block; font-size: .9rem;}
#interview .interview_list li .img{margin-top: 10px; overflow: hidden;} 
#interview a.btn_04 {margin: 80px auto 0;}
    
#entry .section_tit{text-align: center;
    font-size: 2.3rem;
    line-height: 1.4;
    color: #fff;}
#entry .section_tit span{display: block; font-size: 1.4rem;}   
    
#entry .btn{ font-size: 2.5rem; font-family: inherit; position: relative; overflow: hidden; z-index: 1; transition: 0.6s; display: block; border: #2c9caf; padding: 100px 0; background-color: #2c9caf;}
    

    
    

}