@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　career
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-txt-lead {
	position: absolute;
	right: calc((100vw - 1340px)/2);
	z-index: 50;
	margin-top: -160px;
	padding-right: 20px;
	font-size: min(1.5vw, 2.3rem);
	line-height: 1.8;
	text-align: left;
	transition-delay: 2s;
}

@media screen and (max-width: 1340px) {
	.page-txt-lead {
		right: 0;
	}
}



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav-area
-----------------------------------------------------------------*/
.page-nav-area{
	padding: 160px 0 0;
	background: var(--beige);
}
.page-nav{
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1270px;
	margin-inline: auto;
}
.page-nav li{
	max-width: 230px;
	width: calc((100% - 40px)/5)
}
.page-nav li a span:nth-child(1){
	padding: .8em 0;
}
.page-nav li:nth-child(n+4) a span:nth-child(1){
	padding: 0;
}


/* sec
-----------------------------------------------------------------*/
.sec{
	padding: 160px 0;	
}
.sec .pic{
	max-width: 532px;
	width: 40.923%;
}
.sec .txt-area{
	width: 51.08%;
}
.sec .txt-area h2{
	margin-bottom: 40px;
	font-size: min(3.39vw, 5.2rem);
	line-height: 1;
}
.sec .txt-area .txt-lead{
	text-align: left;
	font-size: min(1.76vw, 2.7rem);
	line-height: 1.6;
}
.sec .txt-area .btn-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 60px;
}
.sec .txt-area .btn-list li{
	max-width: 302px;
	width: calc(50% - 5px);
}
.sec .txt-area .btn-list li:nth-child(n+3){
	margin-top: 60px;
}
.sec .txt-area .btn-view-more{
	margin: 70px 0 0 auto;
}


/* sec01  ------------------------------*/
.sec01{
	background: var(--beige);
}


/* sec02  ------------------------------*/
.sec02 .layout-box{
	flex-direction: row-reverse;
}


/* sec03  ------------------------------*/
.sec03{
	background: var(--beige);
}


/* sec04  ------------------------------*/
.sec04 .layout-box{
	flex-direction: row-reverse;
}
.sec04 .txt-area h2 .typewriter + .typewriter,
.sec05 .txt-area h2 .typewriter + .typewriter{
	margin-top: .4em;
}
.sec04 .career-flex{
  display: flex;
  align-items: baseline;
}
.sec04 .career-flex .bnr{
  width: 48%;
}


/* sec05  ------------------------------*/
.sec05{
	background: var(--beige);
}










/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

  .page-ttl{
    padding-bottom: 50px;  
  }
  .page-txt-lead {
    position: static;
    margin-top: 50px;
    padding: 0 20px;
    font-size: 1.7rem;
  }
  .page-nav li:nth-child(1) a span:nth-child(1){
    padding: 0;
  }
  
  
/* page-nav-area
-----------------------------------------------------------------*/
  .page-nav-area{
    padding: 60px 0 0;
  }
  .page-nav{
    flex-wrap: wrap;
  }
  .page-nav li{
    max-width: none;
    width: calc(50% - 10px);
  }
  .page-nav li:nth-child(n+3){
    margin-top: 20px; 
  }


/* sec
-----------------------------------------------------------------*/
  .sec{
    padding: 110px 0;	
  }
  .sec .pic{
    max-width: none;
    width: 100%;
    margin-top: 40px;
  }
  .sec .txt-area{
    width: 100%;
  }
  .sec .txt-area h2{
    font-size: 2.7rem;
    line-height: 1;
  }
  .sec .txt-area .txt-lead{
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.8;
  }
  .sec .txt-area .btn-list{
    display: block;
    margin-top: 40px;
  }
  .sec .txt-area .btn-list li{
    max-width: none;
    width: 100%;
  }
  .sec .txt-area .btn-list li:nth-child(n+2){
    margin-top: 20px;
  }
  .sec .txt-area .btn-list .txt{
    font-size: 1.3rem;  
  }
  .sec .txt-area .btn-view-more{
    margin: 40px 0 0 auto;
  }


/* sec01  ------------------------------*/
  .sec01 .txt-area h2,
  .sec03 .txt-area h2,
  .sec05 .txt-area h2{
    text-align: right;
  }
  .sec01 .txt-area .txt-lead,
  .sec03 .txt-area .txt-lead,
  .sec05 .txt-area .txt-lead{
    text-align: right;
  }


/* sec04  ------------------------------*/
  .sec04 .txt-area h2 .typewriter + .typewriter,
  .sec05 .txt-area h2 .typewriter + .typewriter{
    margin-top: .4em;
  }
  .sec04 .career-flex{
    flex-direction: column-reverse;
    margin-top: 0px;
  }
  .sec04 .career-flex .bnr{
    width: 100%;
    margin-top: 40px;
  }
    
}