@charset "utf-8";
/* CSS Document */
/*
@media screen and (min-width: 768px){
	{
		
	}
}
*/
main {
  padding-top: 75px;
}
@media screen and (min-width: 1500px) {
  main {
    padding-top: 170px;
  }
}

/*------------------------
      mv section
------------------------*/
.mv {
  background-image: url("../images/top_mv_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 376 / 561;
  max-height: 800px;
  background-position: left top;
  position: relative;
  width: 100%;
  padding-top: 30px;
  overflow: hidden;
}
@media screen and (min-width: 1500px) {
  .mv {
    aspect-ratio: 1920/ 1276;
	max-height: 1276px;
	padding-top: 0;
    padding-bottom: 0;
	max-height: 1276px;
  }
}

.mv_inner {
  width: calc(338 / 375 * 100%);
  margin: 0 0 0 calc(40 / 375 * 100%);
}

@media screen and (min-width: 1500px) {
.mv_inner {
  width: calc(1835 / 1920 * 100%);
  margin: 0 0 0 calc( 85 / 1920 * 100%);
	}}


.catchcopy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: calc(215 / 375 * 100%);
  margin: 0 auto 25px 0 /*calc(40 / 375 * 100%);*/
  /*position: absolute;
  left:38px;
  top:28px*/ ;
}


@media screen and (min-width: 1100px) {
  .catchcopy {
    width: calc(570/ 1835 * 100%);
    margin: 0 auto 0 0;
    padding-top: 190px;
	
  }
}
.catchcopy span {
white-space: nowrap;


}
.mv_img {
  width: calc(325 / 375 *100%);
  aspect-ratio: 325 / 356;
  min-width: 325px;
  max-width: 560px;
  margin: 0 0 45px auto;
  border-radius: 150px 0 0 20px;
  overflow: hidden;
  /*position: absolute;
  top: 150px;
  right: 0;*/
}

@media screen and (min-width: 720px) {
  .mv_img {
  position: absolute;
  top:0;
  right: 0;
  width: calc(325 / 375 *100%);
  max-width: 700px;
  aspect-ratio: 325 / 356;
  /*object-fit: cover;*/
  border-radius: 230px 0 0 20px;
  object-position: left top;
  }
}

@media screen and (min-width: 1100px) {
  .mv_img {
      border-radius: 250px 0 0 20px;

  }
}






@media screen and (min-width: 1500px) {
  .mv_img {
    width: calc(1236 / 1835 *100%);
    aspect-ratio: 1236 / 1084;
	max-width: 1236px;
    border-radius: 432px 0 0 20px;
    overflow: hidden;
	object-position: left top;
  }
}
.mv img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を縦横比を保ったままフレームいっぱいに拡大 */
  object-position: center top;

}

/*------------------------
      message section
------------------------*/
.message {
  padding-top: 20px;
  padding-bottom: 150px;
  background-color: #4099FF;
  border-radius: 0 0 50px 50px;
  position: relative;
}

@media screen and (min-width: 1540px) {
  .message {
  padding-top: 120px;
  padding-bottom: 170px;
  }
}

.message_txt_img_wrapper {
	width: calc(300 / 375 * 100%);
    margin: auto;
}

@media screen and (min-width: 1540px) {
  .message_txt_img_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(1472 / 1920 * 100%);
    margin: auto;
	
  }
}

.message_txt_wrapper {
	
width: calc(300 / 300 *100%);
  margin: 0 auto 0;
  max-width: 675px;
  /*width: calc(300 / 375 *100%);
  margin: 0 auto 0;
  max-width: 675px;*/
}

@media screen and (min-width: 1540px) {
  .message_txt_wrapper {
    width: calc(592 / 1472 *100%);
    margin: 0;
  }
}

.message .top_title_deco {}
.message .title {
  margin-bottom: 20px;
}


.top_message_lead {
  margin-bottom: 20px;
}


@media screen and (min-width: 1540px) {
  .top_message_lead {
    width: calc(419 / 592 *100%);
  }
}

.top_message_lead_txt {
  margin-bottom: 40px;
}
@media screen and (min-width: 1540px) {
  .top_message_lead_txt {
    width: calc(419 / 592 *100%);
	margin-bottom: 50px;
  }
}
.top_message_btn {
 
}
@media screen and (min-width: 1366px) {
  .top_message_btn {
    display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 20px;
  }
}
@media screen and (min-width: 1540px) {
  .top_message_lead_txt {
    width: calc(419 / 592 *100%);
  }
}
.top_message_btn_01{
  
  margin-bottom: 20px;
}

@media screen and (min-width: 1366px) {
   .top_message_btn_01{
  margin-bottom: 0;
  }
}

.top_message_btn_01, .top_message_btn_02 {
	min-width: 150px;
}



@media screen and (min-width: 1540px) {
	.top_message_btn_01, .top_message_btn_02 {
		width: calc(270 / 592 * 100%);
        padding: 15px 0px;
		max-width: 315px;
 
}
}



.top_message_btn a {}
/*.top_message_img_wrapper{
	margin:0 0 auto 0;
}*/
.message_img_wrapper {
  width: calc(190 / 300 * 100%);
  margin-right: 35px;
  margin-left: auto;
 /* width: calc(190 / 375 * 100%);
  margin-right: 35px;
  margin-left: auto;*/
}
@media screen and (min-width: 1540px) {
  .message_img_wrapper {
    width: calc(699 / 1472 * 100%);
    margin: 0;
  }
}
.top_message_img_01 {
  width: calc(190 / 190 * 100%);
  aspect-ratio: 190 / 127;
  margin-top: 32px;
  margin-left: auto;
  margin-right: 0;
  border-radius: 20px 50px 50px 20px;
  overflow: hidden;
  max-width: 597px;
  /*position: absolute;
  top: calc(450 / 627 *100);
  left: 150px;*/
}
@media screen and (min-width: 1540px) {
  .top_message_img_01 {
    width: calc(606 / 699 * 100%);
    margin-left: 0;
    margin-right: auto;
	margin-top: 0;
  }
}
.top_message_img_01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*aspect-ratio: 190 / 127;*/
  /*width:calc( 190 / 375*100);*/
}
.top_message_img_02 {
  width: calc(75 / 190 * 100%);
  aspect-ratio: 75 / 105;
  border-radius: 10px;
  overflow: hidden;
  margin-left: auto;
  margin-right: 0;
  margin-top: -210px;
  max-width: 235px;

  /* position: absolute;
  top: calc(364 / 627 *100);
  left: 265px;*/
}
@media screen and (min-width: 1540px) {
  .top_message_img_02 {
    width: calc(249 / 699 * 100%);
    margin-top: -80px;
    margin-right: -93px;
    margin-left: auto;
    margin-right: 0;
	
 
  }
}
.top_message_img_02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*aspect-ratio: 190 / 127;*/
  /*width:calc( 190 / 375*100);*/
}

/*------------------------
 staff-interview section
------------------------*/
.top_staff_interview {
  padding-top: 30px;
 
}

.top_staff_interview .top_title_deco{
display: block;
text-align: center;
}

.top_staff_interview h2 {
  margin-bottom: 20px;
  text-align: center;
}

.top_staff_interview .txt {
  margin-bottom: 40px;
  text-align: center;
}

 
.staff_slider {
  margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
  .staff_slider {
  margin-bottom: clamp(65px,6vw,150px);
}
}

/*.slick-list{
	margin: 0 30px;
}

.slick-slide{
	margin: 0 -30px;
}
*/

@media screen and (min-width: 768px) {
 .staff_list {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
}

.staff_card_inner{
	margin: 0;
}
.staff_card{
 position: relative;
 width: calc( 193 / 375 *100%)!important;
 aspect-ratio: 193 / 218;
}


@media screen and (min-width: 768px) {
 .staff_card{
 width: calc( 450 / 1920 *100%)!important; 
 aspect-ratio: 450 / 509;
  }
}

.staff_card01{
	
}


.staff_card02 {
  z-index: 2;
  position: relative;
}

.staff_card03{
	
	position: relative;
 /*width: calc( 254 / 375 *100%)!important;*/
	
	 
}


 

@media screen and (min-width: 768px) {
  .staff_card03 {
/* width: calc( 570 / 1920 *100%);
 aspect-ratio: 570 / 509;*/

  }
}

/*.staff_card_inner {
  width: 100%;
  height: 100%;
}*/

/*.staff_card_inner:nth-child(3) {
 
}*/

/*.staff_card_inner img {
  width: 100%; 
  height: 100%;
}*/

/*.staff_card_inner #staff_03 {
aspect-ratio: 570 / 509;
}*/



#staff_01 {}
@media screen and (min-width: 768px) {
	#staff_01 {}}

#staff_02 {}
@media screen and (min-width: 768px) {
	#staff_02 {}
}




    #staff_03 {}

    @media screen and (min-width: 768px) {
      #staff_03 {}
    }

    .staff_name {}
    .staff_name p {}
    .staff_comment {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
	  margin-top:-15px;
     
    }
    .staff_comment p {
      width: fit-content;
      background-color: #2684F0;
      padding: 4px 8px;
      white-space: nowrap;
      color: #fff
    }

.staff_comment03{
	/*margin-left: 30px;*/
}
   
   @media screen and (min-width: 768px) {
      .staff_comment03{
		  	/*margin-left:calc( 60 / 570 * 100%);*/

	   }
    }

    /*.staff_slider {
	position: relative;
  overflow: hidden; 
  width: 100%;
}

.staff_list {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.3s ease; 
}

.staff_card {
  flex: 0 0 calc(193 / 375 * 100%);
  aspect-ratio: 193 / 218;
  border-radius: 500px 500px 0 0;
  background-color: #D4E7FF;
  overflow: visible;
  position: relative;
}

.staff_card img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120%;
}

.staff_comment p {
  display: inline-block;
  background-color: #2684F0;
  color: #fff;
  padding: 4px 8px;
  white-space: nowrap;
}

.slider_prev,
.slider_next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.slider_prev { left: 0; }
.slider_next { right: 0; }
*/
    .top_staff_interview .btn {
      margin-bottom: 50px;
	  margin-left: auto;
	  margin-right: auto;
    }

   @media screen and (min-width: 768px) {
      .top_staff_interview .btn{
      margin-bottom: 50px;

	   }
    }


/*------------------------
    recruit_flow section
------------------------*/

 /* 共通 */
    .flow_and_qa {
      background: none; /* 初期は透明 */
    }
    /* PC版だけ背景をまとめる */
    @media screen and (min-width: 1090px) {
      .flow_and_qa {
        background-color: #E9F3FA;
      }
      .recruit_flow, .qa {
        background: none; /* 個別の背景を消す */
      }
    }
    .recruit_flow {}
    @media screen and (min-width: 768px) {
      .recruit_flow {
		 
		}
    }
    .recruit_flow_titleset {
      width: calc(295 / 375 * 100%);
      margin: auto;
    }
    .recruit_flow .title {
      margin-bottom: 25px;
    }
    .recruit_flow_wrap {
      padding: 45px 0;
      background-color: #E9F3FA;
      width: calc(292 / 375 * 100%);
      max-width: 800px;
      border-radius: 10px;
      margin: 0 auto 50px;
    }
    @media screen and (min-width: 1090px) {
      .recruit_flow_wrap {
        width: calc(1495 / 1920 * 100%);
        max-width: 1495px;
      }
    }
    .recruit_flow_wrap_inner {}
    @media screen and (min-width: 1090px) {
      .recruit_flow_wrap_inner {
        display: flex;
        align-items: center;
      }
    }
    .recruit_flow_contents {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: calc(150 / 295 * 100%);
      aspect-ratio: 150 / 178;
      max-width: 160px;
      border: 3px solid #30B1AA;
      margin: 0 auto;
      padding-top: 15px;
    }
    @media screen and (min-width: 1090px) {
      .recruit_flow_contents {
        width: calc(292 / 1495 * 100%);
        max-width: 292px;
      }
    }
    .arrow {
     /* display: block;
      width: calc(25 / 292 * 100%);
      margin: 0 auto;
      transform: rotate(90deg);
      transform-origin: center;*/
	 width: 1vw;      
    min-width: 25px;    
  aspect-ratio: 1 / 1; 
  margin: 0 auto;
  transform: rotate(90deg); 
  transform-origin: center;
    }
    @media screen and (min-width: 1090px) {
      .arrow {
        width: calc(52 / 1495 * 100%);
        transform: rotate(0deg);
		
      }
    }

  .arrow img {
  display: block;
  height: auto;
    }


    hgroup {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .recruit_flow_step {
      width:fit-content;
	  padding: 5px 15px;
      text-align: center;
      border-radius: 500px;
      background-color: #30B1AA;
      margin-bottom: 13px;
    }
    .recruit_flow_mission {
      margin-bottom: 10px;
    }
    #recruit_flow_step_01 {
      width: calc(57 / 150 * 100%);
      margin-bottom: 8px;
    }
    @media screen and (min-width: 1090px) {
      #recruit_flow_step_01 {
        width: calc(98 / 292 * 100%);
      }
    }
    #recruit_flow_step_02 {
      width: calc(62 / 150 * 100%);
      margin-bottom: 12px;
    }
    @media screen and (min-width: 1090px) {
      #recruit_flow_step_02 {
        width: calc(101 / 292 * 100%);
      }
    }
    #recruit_flow_step_03 {
      width: calc(78 / 150 * 100%);
      margin-bottom: 22px;
    }
    @media screen and (min-width: 1090px) {
      #recruit_flow_step_03 {
        width: calc(148 / 292 * 100%);
      }
    }
    #recruit_flow_step_04 {
      width: calc(88 / 150 * 100%);
      margin-bottom: 28px;
    }
    @media screen and (min-width: 1090px) {
      #recruit_flow_step_04 {
        width: calc(163 / 292 * 100%);
      }
    }
    .recruit_btn .btn {
      text-align: center;
      margin-top: 45px;
      margin-bottom: 45px;
    }
    .recruit_btn {
      width: calc(150 / 295 * 100%);
      margin: 50px auto 0;
    }


    @media screen and (min-width: 1090px) {
      .recruit_btn{
      margin-top: clamp(65px,6vw,100px);

      }
    }


/*------------------------
       QandA section
------------------------*/
    .qanda {
      padding-top: 55px;
      background-color: #6BB0FF;
      border-radius: 100px 100px 0 0;
      text-align: center;
      overflow: hidden;
    }

    @media screen and (min-width: 768px) {
      .qanda {
       padding-bottom: 20px;
      }
    }



    .qanda .title {
      margin-bottom: 40px;
    }
    .qa_content {
      width: calc(355 / 375 * 100%);
      max-width: 400px;
      margin: 0 auto 30px;
    }
    @media screen and (min-width: 768px) {
      .qa_content {
        width: calc(910 / 1920 * 100%);
		min-width: 500px;
        max-width: 910px;
      }
    }
    /*.qa_content txt{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}*/
    .question {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-radius: 12px;
      background-color: #fff;
      cursor: pointer;
      position: relative;
      border: none;
    }
    .question .txt {
      display: flex;
      width: calc(300 / 335 * 100%);
      justify-content: flex-start;
      align-items: center;
    }
    .question::after {
      content: "+";
      font-size: 24px;
      font-weight: 400;
      display: inline-block;
      color: #30B1AA;
      /*position: absolute;
  right: 15px;*/
    }
    .question.active {
      border-radius: 12px 12px 0 0;
    }
    .question.active::after {
      content: "-";
      display: inline-block;
    }
    .en {
      padding-right: 10px;
      color: #30B1AA;
    }
    .question_txt {
      width: calc(264 / 300 * 100%);
      text-align: left;
    }
    .answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0 15px;
      background-color: #fff;
      border-radius: 0 0 12px 12px;
      border: none;
    }
    .answer .txt {
      margin: 10px 0 20px;
      text-align: left;
      display: flex;
      width: calc(300 / 335 * 100%);
      justify-content: flex-start;
      align-items: flex-start;
    }
/*------------------------
        cta section
------------------------*/
   .cta {
      background-image: url("../images/common_cta_bg.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      aspect-ratio: 375 / 286;
      text-align: center;
	  padding-top: 50px;
	  /*padding-top: 25px;*/
	  
    }

    @media screen and (min-width: 475px) {
      .cta {
        background-size: cover;
        aspect-ratio: 1921 / 950;
        background-position: center center;
        text-align: left;
		
		
      }
    }

    /*@media screen and (min-width: 1500px) {
      .cta {
    text-align: left;
		
		
      }*/
    




    .cta_wrapper {
		width: calc( 315 / 375 * 100%);
		margin-left: auto;
		margin-right: auto;
}
    @media screen and (min-width: 1500px) {
      .cta_wrapper {
        width: calc(1176 / 1920 * 100%);
        margin-left: calc(150 / 1920 * 100%);
        /*ここも比率合わない*/
      }
    }
    .cta_lead_wrapper {
      background-color: rgba(255, 255, 255, 0.8);
      display: inline-block;
      margin-bottom: 45px;
      /*margin-top: 25px;*/
      padding: 5px;
    }
    @media screen and (min-width: 1500px) {
      .cta_lead_wrapper {
        margin-bottom: 25px;
        margin-top: 75px;
      }
    }
    .cta_lead {
      background: linear-gradient(90deg, #3374FF 0%, #20BDFF 50%, #1CFF60 100%);
      -webkit-background-clip: text; /* 背景を文字にクリップ */
      -webkit-text-fill-color: transparent; /* 文字色を透明に */
    }
    @media screen and (min-width: 1500px) {
      .cta_lead {}
    }
    .cta_txt_wrapper {
      background-color: rgba(255, 255, 255, 0.8);
      width: calc(280 / 315 * 100%);
      /*ここも比率合わない*/
      display: inline-block;
	 margin-bottom:clamp(20px,10vw,470px)
    }

    @media screen and (min-width: 500px) {
      .cta_txt_wrapper {
        	 margin-bottom:clamp(20px,10vw,470px);

       
      }
    }



    @media screen and (min-width: 1500px) {
      .cta_txt_wrapper {
        width: calc(1150 / 1150 * 100%);
        /*ここも比率合わない*/
       
      }
    }
    .cta_txt {
      color: #3374FF;
	 
    }
    .cta_txt_btn {
      display: flex;
      justify-content: center;
	  align-items: center;
      column-gap: 15px;
	 margin-right: 0;
	 margin-left: auto;
    }

  @media screen and (min-width: 450px) {
      .cta_txt_btn {
       padding-bottom: 20px;
      }
    }

  @media screen and (min-width: 1500px) {
      .cta_txt_btn {
       justify-content: flex-end;
       column-gap: 90px
      }
    }



.cta_txt_btn .btn{
	
}

  @media screen and (min-width: 1500px) {
      .cta_txt_btn .btn{
          
      }
    }



  


    .cta a {}