@charset "utf-8";

/**
 *
 *  サイト共通
 *
 */

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
ul,ol,li,dl,dt,dd{list-style-type:none;list-style-position:outside;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
img{vertical-align:top;border:0;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0;padding:0;}
input,select{vertical-align:middle;}


/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
	font-size: 62.5%;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	color: #000;
	background: #FFF;
	font-family: 'Noto Sans JP','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','游ゴシック体','Yu Gothic', YuGothic,'メイリオ',Meiryo ,'ＭＳ Ｐゴシック','MS P Gothic' ,sans-serif;
	font-size: 1.6rem;
	line-height: 2.2;	
}

/* fonts */
.en{
  font-family: 'Poppins', sans-serif;
}
._uc{
   text-transform:uppercase;  
}


/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/

a{
	outline: none;
}
a:link,
a:visited{
	text-decoration: none;
	color: #333;
}

:focus {
    outline: none;
}

.ophover{
	transition: opacity ease .3s;	
}
.ophover:hover{
	opacity: .7;
}


/*--------------------------------------------------------------------------
   img
---------------------------------------------------------------------------*/
img{
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;		
}

/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,blur,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,100px); 
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-100px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-100px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(100px,0); 
}
.blur{
  filter: blur(14px);  
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

.mv {
	opacity: 1;
	transform: translate(0,0);
  filter: blur(0); 
}

/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
.sp{
	display: none;	
}
/* box-sizing ---*/	
header, footer, section, div, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, th, td, a, span {
	box-sizing: border-box;
}



/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Page{
	overflow: hidden;	
}
.outer{
	max-width: 1920px;
	margin: 0 auto;
}
.inner{
	max-width: 1240px;
	padding: 0 20px;
	margin: 0 auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}



/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
#Mv{
	position: relative;
	height: 56.266vw;
	background: no-repeat center center;
	background-size: cover;
}

#Mv .main-copy{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	color: #FFF;
	line-height: 1;	
}
#Mv .main-copy .ttas{
	font-size: 2.7rem;
	letter-spacing: .3em;
	font-weight: 500;	
}
#Mv .main-copy h1{
	margin: 25px 0;
	padding: 0 20px;
	line-height: 0;
	transition-delay: 1.5s;
	transition-duration: 1.5s;	
}
#Mv .main-copy .career{
  display: inline-block;
  padding: 18px 10px;
  border: 5px solid #FFF;
	font-size: 4.6rem;
	font-weight: 800;
  transition-duration: 1s;
  transition-delay: 1.8s;
  opacity: 0;  
}
#Mv .main-copy .career.mv{
  opacity: 1;  
}
@media screen and (max-width: 768px) {
	#Mv .main-copy .career.mv{
		line-height: 1.3; 
	}
}


#Mv .main-copy .ttas span,
#Mv .main-copy .career span{
	display: inline-block;
	transition: .7s;
	transform: translateX(1.5em);
	opacity:0;	
}
#Mv .main-copy .ttas span.show,
#Mv .main-copy .career span.show{
	transform: translateX(0);
	opacity: 1;
}

#Mv .main-copy .ttas span:nth-child(2){ transition-delay: .05s; }
#Mv .main-copy .ttas span:nth-child(3){ transition-delay: .1s; }
#Mv .main-copy .ttas span:nth-child(4){ transition-delay: .15s; }
#Mv .main-copy .ttas span:nth-child(5){ transition-delay: .2s; }
#Mv .main-copy .ttas span:nth-child(6){ transition-delay: .25s; }
#Mv .main-copy .ttas span:nth-child(7){ transition-delay: .3s; }
#Mv .main-copy .ttas span:nth-child(8){ transition-delay: .35s; }
#Mv .main-copy .ttas span:nth-child(9){ transition-delay: .4s; }
#Mv .main-copy .ttas span:nth-child(10){ transition-delay: .45s; }
#Mv .main-copy .ttas span:nth-child(11){ transition-delay: .5s; }
#Mv .main-copy .ttas span:nth-child(12){ transition-delay: .55s; }
#Mv .main-copy .ttas span:nth-child(13){ transition-delay: .6s; }
#Mv .main-copy .ttas span:nth-child(14){ transition-delay: .65s; }
#Mv .main-copy .ttas span:nth-child(15){ transition-delay: .7s; }
#Mv .main-copy .ttas span:nth-child(16){ transition-delay: .75s; }
#Mv .main-copy .ttas span:nth-child(17){ transition-delay: .8s; }
#Mv .main-copy .ttas span:nth-child(18){ transition-delay: .85s; }
#Mv .main-copy .ttas span:nth-child(19){ transition-delay: .9s; }
#Mv .main-copy .ttas span:nth-child(20){ transition-delay: .95s; }
#Mv .main-copy .ttas span:nth-child(21){ transition-delay: 1s; }
#Mv .main-copy .ttas span:nth-child(22){ transition-delay: 1.05s; }
#Mv .main-copy .ttas span:nth-child(23){ transition-delay: 1.1s; }
#Mv .main-copy .ttas span:nth-child(24){ transition-delay: 1.15s; }
#Mv .main-copy .ttas span:nth-child(25){ transition-delay: 1.2s; }
#Mv .main-copy .ttas span:nth-child(26){ transition-delay: 1.25s; }
#Mv .main-copy .ttas span:nth-child(27){ transition-delay: 1.3s; }



#Mv .main-copy .career span:nth-child(1){ transition-delay: 2s; }
#Mv .main-copy .career span:nth-child(2){ transition-delay: 2.05s; }
#Mv .main-copy .career span:nth-child(3){ transition-delay: 2.1s; }
#Mv .main-copy .career span:nth-child(4){ transition-delay: 2.15s; }
#Mv .main-copy .career span:nth-child(5){ transition-delay: 2.2s; }
#Mv .main-copy .career span:nth-child(6){ transition-delay: 2.25s; }
#Mv .main-copy .career span:nth-child(7){ transition-delay: 2.3s; }
#Mv .main-copy .career span:nth-child(8){ transition-delay: 2.35s; }
#Mv .main-copy .career span:nth-child(9){ transition-delay: 2.4s; }
#Mv .main-copy .career span:nth-child(10){ transition-delay: 2.45s; }
#Mv .main-copy .career span:nth-child(11){ transition-delay: 2.5s; }
#Mv .main-copy .career span:nth-child(12){ transition-delay: 2.55s; }
#Mv .main-copy .career span:nth-child(13){ transition-delay: 2.6s; }
#Mv .main-copy .career span:nth-child(14){ transition-delay: 2.65s; }
#Mv .main-copy .career span:nth-child(15){ transition-delay: 2.7s; }
#Mv .main-copy .career span:nth-child(16){ transition-delay: 2.75s; }
#Mv .main-copy .career span:nth-child(17){ transition-delay: 2.8s; }
#Mv .main-copy .career span:nth-child(18){ transition-delay: 2.85s; }
#Mv .main-copy .career span:nth-child(19){ transition-delay: 2.9s; }
#Mv .main-copy .career span:nth-child(20){ transition-delay: 2.95s; }



.breadcrumb{
	max-width: 1240px;
	padding: 15px 20px;
	margin: 0 auto;
	display: flex;
	font-size: 1.4rem;
	line-height: 1;
}
.breadcrumb li{
	position: relative;
	margin-right: 24px;
}
.breadcrumb li:nth-child(n+2)::before{
position: absolute;
left: -15px;
top: 0;
display: block;
content: ">";
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content {
	
}



/* 見出し
-----------------------------------------------------------------*/
/* sec-horisontal-ttl */
.sec-horisontal-ttl{
	text-align: center;
	color: #19b516;
	font-weight: 700;
	line-height: 1;
}
.sec-horisontal-ttl .en{
	font-size: 5.2rem;
}
.sec-horisontal-ttl .ja{
	font-size: 2.1rem;
	
}
.sec-horisontal-ttl .ja::before{
	content:"/";
	padding: 0 0.5em 0 1em;	
}

/* .typewriter */
.typewriter .en span{
	display:inline-block;
	transition:1.7s;
}
.typewriter .en span:nth-child(odd){
	transform: translateY(-8px);
}
.typewriter .en span:nth-child(even){
	transform: translateY(8px);
}
#Page .typewriter .en span.show{
	transform: translateY(0);
}
.ttl-type{
	text-align: center;
	line-height: 1;
	color: #2dbd2a;
	font-weight: 800;
}
.ttl-type .en{
	display: block;
	margin-bottom: 20px;
	font-size: 4.4rem;
}
.ttl-type .ja{
	font-size: 2.2rem;
}

.txt-side{
	position: absolute;
}



/* ボタン
-----------------------------------------------------------------*/
.btn-base a{
	position: relative;
	display: block;
	padding: 15px 0;
	border-radius: 50px;
	background: #2dbd2a;
	font-size: 1.5rem;
	font-weight: 700;
	color: #FFF;
	text-align: center;
}
.btn-base a::after{
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-40%);
	display: block;
	content: "";
	width: 13px;
	height: 12px;
	background:url(../image/btn_arw_w.svg) no-repeat;
	background-size: 100% auto;	
	transition: .2s;
}
.btn-base a:hover::after{
	right: 20px;
}
.btn-base a[target="_blank"] span{
	padding-right: 18px;
  background: url(../image/ico_blank.png) no-repeat right top 0.35em;
}

/* viewmore */
.btn-base._viewmore a{
	max-width: 230px;
	font-family: 'Poppins', sans-serif;
	text-transform:uppercase;	
}

/* comingsoon */
.btn-base.comingsoon {
    filter: saturate(0);
		pointer-events: none;
}


/* コンテンツレイアウト
-----------------------------------------------------------------*/

/* wide-cont-intro */
.wide-cont-intro{
	position: relative;
	z-index: 3;
	padding-bottom: 160px;
}
.wide-cont-intro .inner::after{
	clear :both;
	content: "";
	display: block;
	height: 0;	
}
.wide-cont-intro .pic{
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(990px + (100% - 1200px) / 2);
	border-radius: 10px 0 0 10px;
	overflow: hidden;
}
.wide-cont-intro._rev .pic{
	right: auto;
	left: 0;
	border-radius: 0 10px 10px 0;
}
.wide-cont-intro .pic img{
	max-width: none;
	width: 100%;
}
.wide-cont-intro .txt-area{
	position: relative;
	z-index: 5;
	max-width: 520px;
	width: 100%;
  min-height: 510px;
	padding: 70px 4% 80px;
	border-radius: 10px;
	background: #FFF; 	
}
.wide-cont-intro._rev .txt-area{
	float: right;
}
.wide-cont-intro .txt-area h3{
	margin-bottom: 35px;
	line-height: 1.4;
	font-weight: 800;
}
.wide-cont-intro .txt-area h3 .ja{
	display: block;
	font-size: 3.8rem;
}
.wide-cont-intro .txt-area h3 .en{
	font-size: 1.8rem;	
}
.wide-cont-intro .txt-area .btn-base{
	margin-top: 40px;
}



/* clearfix
-----------------------------------------------------------------*/
.cf:after{
	clear :both;
	content: "";
	display: block;
	height: 0;
}






/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	body{
		font-size: 1.3rem;
		line-height: 1.85;
	}
	#Page {
		min-width: 320px;	
	}
	#Page img{
		width: 100%;
		height: auto;
	}
	.pc{
		display: none;	
	}
	.sp{
		display: block;	
	}
	img.sp,
	br.sp{
		display: inline;
	}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
.inner{
	max-width: initial;	
}


/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
	#Mv{
		position: relative;
		height: 160vw;
	}
	
	#Mv .main-copy .ttas{
		font-size: 1.3rem;
		letter-spacing: .2em;
	}
	#Mv .main-copy .ttas+.ttas{
		margin-top: 5px;
	}
	#Mv .main-copy h1{
		margin: 15px 0;
		padding: 0 20px;
		line-height: 0;
		transition-delay: 1.5s;
		transition-duration: 1.5s;	
	}
	#Mv .main-copy .career{
    padding: 10px 10px 12px;
    border-width: 3px;
		font-size: 2.2rem;
	}
	
	#Mv .main-copy .ttas span,
	#Mv .main-copy .career span{
		display: inline-block;
		transition: .7s;
		transform: translateX(1.5em);
		opacity:0;	
	}
	#Mv .main-copy .ttas span.show,
	#Mv .main-copy .career span.show{
		transform: translateX(0);
		opacity: 1;
	}

	.breadcrumb{
		display: none;
		left: 20px;
		bottom: -20px;
		width: calc(100% - 70px);
		font-size: 1.1rem;
		line-height: 1.5;
	}
	.breadcrumb li{
		margin-right: 20px;
	}
	.breadcrumb li:nth-child(n+2)::before {
    left: -13px;
	}	

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content {

}

/* 見出し
-----------------------------------------------------------------*/

/* sec-horisontal-ttl */
	.sec-horisontal-ttl .en{
		display: block;
		margin-bottom: 5px;
		font-size: 4rem;
	}
	.sec-horisontal-ttl .ja{
		font-size: 1.3rem;
		
	}
	.sec-horisontal-ttl .ja::before{
		display: none;
	}


/* typewriter */
	.typewriter .en span{
		transition:1.6s;
	}
	.typewriter .en span:nth-child(odd){
		transform: translateY(-4px);
	}
	.typewriter .en span:nth-child(even){
		transform: translateY(4px);
	}
	.ttl-type .en{
		margin-bottom: 10px;
		font-size: 3rem;
	}
	.ttl-type .ja{
		font-size: 1.6rem;
	}	
	
	.txt-side{
		width: 70px;
	}


/* ボタン
-----------------------------------------------------------------*/
	.btn-base a{
		font-size: 1.3rem;
	}
	.btn-base a:hover::after{
		right: 25px;
	}

/* viewmore */
	.btn-base._viewmore a{
		max-width: 240px;
		margin: 0 auto;
	}
	


/* コンテンツレイアウト
-----------------------------------------------------------------*/

/* wide-cont-intro */
	.wide-cont-intro{
		position: relative;
		padding-bottom: 0;
	}
	.wide-cont-intro .pic{
		position: static;
		width: calc(100% - 70px);
    margin: 0 0 0 70px;
    border-radius: 5px 0 0 5px;
	}
	.wide-cont-intro._rev .pic{
		margin: 0 70px 0 0;
    border-radius: 0px 5px 5px 0;
	}
	.wide-cont-intro .txt-area{
    min-height: inherit;
		margin: -45px auto 0;
		padding: 40px 20px 35px;
		border-radius: 5px; 	
	}
	.wide-cont-intro._rev .txt-area{
		float: right;
	}
	.wide-cont-intro .txt-area h3{
		margin-bottom: 15px;
	}
	.wide-cont-intro .txt-area h3 .ja{
		font-size: 2.3rem;
	}
	.wide-cont-intro .txt-area h3 .en{
		font-size: 1.1rem;	
	}
	.wide-cont-intro .txt-area .btn-base{
		margin-top: 20px;
	}	

}