@charset "UTF-8";

/*
	base
-----------------------------------------------------------------------------------------------*/
:root {
	--anmDuration: 0.7s;
	--anmDelay: 0.2s;
	--anmBaseCB: cubic-bezier(0.33, 0, 0.67, 1);
}

/* 起点 */
.jsAnm {
	opacity: 0;
}
.jsAnmStart {
	animation-duration: var(--anmDuration);
	animation-timing-function: ease;
	animation-delay: var(--anmDelay);
	animation-fill-mode: forwards;
}

/* ふわっと
============================== */
.anmFadeIn.jsAnmStart{
	animation-name: anmFadeIn;
}
@keyframes anmFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/* 下からふわっと
============================== */
.anmFadeUp.jsAnmStart{
	animation-name: anmFadeUp;
}
@keyframes anmFadeUp{
	from{
		opacity: 0;
		transform: translateY(20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 上からふわっと
============================== */
.anmFadeDown.jsAnmStart{
	animation-name: anmFadeDown;
}
@keyframes anmFadeDown{
	from{
		opacity: 0;
		transform: translateY(-20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 右からふわっと
============================== */
.anmFadeRight.jsAnmStart{
	animation-name: anmFadeRight;
}
@keyframes anmFadeRight{
	from{
		opacity: 0;
		transform: translateX(-20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* 左からふわっと
============================== */
.anmFadeLeft.jsAnmStart{
	animation-name: anmFadeLeft;
}
@keyframes anmFadeLeft{
	from{
		opacity: 0;
		transform: translateX(20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* 弾ける
============================== */
.anmBurstOut.jsAnmStart{
	animation-name: burstOut;
}
@keyframes burstOut {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}
	50% {
		transform: translate(var(--tx), var(--ty)) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(var(--tx), var(--ty)) scale(1);
		opacity: 1;
	}
}

/*
	ページ全体
-----------------------------------------------------------------------------------------------*/
#wrapper{
	opacity: 0;
	animation: anmFadeIn 0.8s ease 0.2s forwards;
}


/*
	装飾
-----------------------------------------------------------------------------------------------*/
/* 丸
============================== */
.cmnItemCircle{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}
.cmnItemCircle.jsAnmStart{
	animation: burstOut 2.0s var(--anmBaseCB) forwards;
}
/* 各アイテム共通 */
.cmnItemCircle.item01 {
	width: 12px;
	height: 12px;
	background-color: var(--colorSub01);
}
.cmnItemCircle.item02 {
	background-color: var(--colorSub02);
}
.cmnItemCircle.item03 {
	width: 16px;
	height: 16px;
	background-color: var(--colorSub03);
}
.cmnItemCircle.item04,
.cmnItemCircle.item08 {
	width: 12px;
	height: 12px;
	background-color: var(--colorSub04);
}
.cmnItemCircle.item05 {
	width: 16px;
	height: 16px;
	background-color: var(--colorSub05);
}
.cmnItemCircle.item06 {
	background-color: var(--colorSub06);
}
.cmnItemCircle.item07 {
	width: 12px;
	height: 12px;
	background-color: var(--colorSub07);
}


/*
	トップページ
-----------------------------------------------------------------------------------------------*/
/* KV
============================== */
/* タイトル */
.titKv.jsAnmStart{
	animation: anmFadeUp 1.0s ease 0.8s forwards;
}
/* メインイラスト */
.imgKv.jsAnmStart{
	animation: anmFadeUp 1.0s ease 1.0s forwards;
}
/* 丸イラスト */
.itemKv01.jsAnmStart{
	animation: anmFadeIn 1.0s ease 1.6s forwards;
}
.itemKv02.jsAnmStart{
	animation: anmFadeIn 1.0s ease 2.0s forwards;
}
.itemKv03.jsAnmStart{
	animation: anmFadeIn 1.0s ease 1.8s forwards;
}
.itemKv04.jsAnmStart{
	animation: anmFadeIn 1.0s ease 1.8s forwards;
}
.itemKv05.jsAnmStart{
	animation: anmFadeIn 1.0s ease 2.0s forwards;
}
.itemKv06.jsAnmStart{
	animation: anmFadeIn 1.0s ease 1.6s forwards;
}

/* KVエリア_丸
============================== */
#kvWrapper .cmnItemCircle.jsAnmStart{
	animation-delay: 2.0s;
}
/* 各アイテム */
#kvWrapper .cmnItemCircle.item01 {
	--tx: 250px;
	--ty: 30px;
}
#kvWrapper .cmnItemCircle.item02 {
	--tx: -450px;
	--ty: -270px;
}
#kvWrapper .cmnItemCircle.item03 {
	--tx: -530px;
	--ty: 260px;
}
#kvWrapper .cmnItemCircle.item04 {
	width: 16px;
	height: 16px;
	--tx: 550px;
	--ty: -110px;
}
#kvWrapper .cmnItemCircle.item05 {
	--tx: 410px;
	--ty: -210px;
}
#kvWrapper .cmnItemCircle.item06 {
	width: 20px;
	height: 20px;
	--tx: 490px;
	--ty: 215px;
}
#kvWrapper .cmnItemCircle.item07 {
	width: 17px;
	height: 17px;
	--tx: -520px;
	--ty: -40px;
}
#kvWrapper .cmnItemCircle.item08{
	width: 12px;
	height: 12px;
	--tx: -260px;
	--ty: 85px;
}

/* リード文_丸
============================== */
#leadWrapper .cmnItemCircle.jsAnmStart{
	animation-delay: 0.4s;
}
/* 各アイテム */
#leadWrapper .cmnItemCircle.item01{
	width: 16px;
	height: 16px;
	--tx:  -380px;
	--ty: 20px;
}
#leadWrapper .cmnItemCircle.item02{
	width: 12px;
	height: 12px;
	--tx:  460px;
	--ty:  -140px;
}
#leadWrapper .cmnItemCircle.item04{
	--tx: -500px;
	--ty: -50px;
}
#leadWrapper .cmnItemCircle.item05{
	--tx:  360px;
	--ty:  -40px;
}
#leadWrapper .cmnItemCircle.item06{
	width: 20px;
	height: 20px;
	--tx: -480px;
	--ty:  110px;
}
#leadWrapper .cmnItemCircle.item07{
	--tx:  520px;
	--ty: -10px;
}

/* 事業紹介_丸
============================== */
#businessWrapper .cmnItemCircle{
	animation-delay: 0.4s;
	pointer-events: none;
}
/* 各アイテム */
#businessWrapper .cmnItemCircle.item01{
	--tx:  380px;
	--ty: -70px;
}
#businessWrapper .cmnItemCircle.item02{
	--tx:  430px;
	--ty: -200px;
}
#businessWrapper .cmnItemCircle.item03{
	--tx:  290px;
	--ty: -290px;
}
#businessWrapper .cmnItemCircle.item04{
	--tx: -40px;
	--ty: 180px;
}
#businessWrapper .cmnItemCircle.item05{
	--tx:  -40px;
	--ty: -170px;
}
#businessWrapper .cmnItemCircle.item06{
	--tx:  -520px;
	--ty: 65px;
}
#businessWrapper .cmnItemCircle.item07{
	--tx: -430px;
	--ty:  180px;
}

/* 社員を知る_丸
============================== */
#peopleWrapper .cmnItemCircle{
	animation-delay: 0.4s;
}
/* 各アイテム */
#peopleWrapper .cmnItemCircle.item01{
	--tx:  -360px;
	--ty: 210px;
}
#peopleWrapper .cmnItemCircle.item02{
	--tx:  -550px;
	--ty: 15px;
}
#peopleWrapper .cmnItemCircle.item03{
	--tx:  410px;
	--ty: -310px;
}
#peopleWrapper .cmnItemCircle.item04{
	--tx: 60px;
	--ty: -270px;
}
#peopleWrapper .cmnItemCircle.item05{
	--tx:  -450px;
	--ty: -270px;
}
#peopleWrapper .cmnItemCircle.item06{
	--tx:  350px;
	--ty: 330px;
}
#peopleWrapper .cmnItemCircle.item07{
	--tx: 530px;
	--ty:  -160px;
}


/*
	下層ページ共通
-----------------------------------------------------------------------------------------------*/
/* KVエリア_丸
============================== */
#cmnPageKvWrapper .cmnItemCircle{
	animation: burstOut 2.0s var(--anmBaseCB) forwards;
	animation-delay: 0.4s;
}
/* 各アイテム */
#cmnPageKvWrapper .cmnItemCircle.item01{
	--tx:  170px;
	--ty: -150px;
}
#cmnPageKvWrapper .cmnItemCircle.item02{
	--tx:  480px;
	--ty: 185px;
}
#cmnPageKvWrapper .cmnItemCircle.item03{
	--tx:  -480px;
	--ty:  140px;
}
#cmnPageKvWrapper .cmnItemCircle.item04{
	--tx: -590px;
	--ty: -85px;
}
#cmnPageKvWrapper .cmnItemCircle.item05{
	--tx:  -140px;
	--ty: -100px;
}
#cmnPageKvWrapper .cmnItemCircle.item06{
	--tx:  -150px;
	--ty:  140px;
}
#cmnPageKvWrapper .cmnItemCircle.item07{
	--tx: -20px;
	--ty:  30px;
}


/*
	先輩社員インタビュー
-----------------------------------------------------------------------------------------------*/
.interviewPageNum{
	animation: anmFadeLeft var(--anmDuration) ease var(--anmDelay) forwards;
}

/* KVエリア_丸
============================== */
#interviewPageKvAreaWrapper .cmnItemCircle{
	animation: burstOut 2.0s var(--anmBaseCB) forwards;
	animation-delay: 0.4s;
}
/* 各アイテム */
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item01{
	--tx:  -320px;
	--ty: 20px;
}
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item02{
	--tx:  390px;
	--ty: 135px;
}
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item03{
	--tx:  -580px;
	--ty:  120px;
}
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item04{
	--tx: -520px;
	--ty: -140px;
}
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item05{
	--tx: 60px;
	--ty: -190px;
}
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item06{
	--tx:  -260px;
	--ty:  240px;
}
.interviewPage #cmnPageKvWrapper .cmnItemCircle.item07{
	--tx: 565px;
	--ty:  -100px;
}


@media screen and (max-width:812px){
	/*
		装飾
	-----------------------------------------------------------------------------------------------*/
	/* 丸
	============================== */
	.cmnItemCircle{
		width: 10px;
		height: 10px;
	}
	/* 各アイテム共通 */
	.cmnItemCircle.item01 {
		width: 6px;
		height: 6px;
	}
	.cmnItemCircle.item03 {
		width: 8px;
		height: 8px;
	}
	.cmnItemCircle.item04,
	.cmnItemCircle.item08 {
		width: 6px;
		height: 6px;
	}
	.cmnItemCircle.item05 {
		width: 8px;
		height: 8px;
	}
	.cmnItemCircle.item07 {
		width: 6px;
		height: 6px;
	}


	/*
		トップページ
	-----------------------------------------------------------------------------------------------*/
	/* KVエリア_丸
	============================== */
	/* 各アイテム */
	#kvWrapper .cmnItemCircle.item01 {
		width: 8px;
		height: 8px;
		--tx: 100px;
		--ty: 70px;
	}
	#kvWrapper .cmnItemCircle.item02 {
		--tx: -160px;
		--ty: -120px;
	}
	#kvWrapper .cmnItemCircle.item03 {
		--tx: -180px;
		--ty: 160px;
	}
	#kvWrapper .cmnItemCircle.item04 {
		width: 10px;
		height: 10px;
		--tx: 160px;
		--ty: 90px;
	}
	#kvWrapper .cmnItemCircle.item05 {
		--tx: 160px;
		--ty: -100px;
	}
	#kvWrapper .cmnItemCircle.item06 {
		width: 12px;
		height: 12px;
		--tx: 90px;
		--ty: 220px;
	}
	#kvWrapper .cmnItemCircle.item07 {
		width: 7px;
		height: 7px;
		--tx: -130px;
		--ty: 20px;
	}
	#kvWrapper .cmnItemCircle.item08{
		width: 8px;
		height: 8px;
		--tx: -100px;
		--ty: 70px;
	}

	/* リード文_丸
	============================== */
	#leadWrapper .cmnItemCircle{
		display: none;
	}

	/* 事業紹介_丸
	============================== */
	/* 各アイテム */
	#businessWrapper .cmnItemCircle.item01{
		width: 8px;
		height: 8px;
		--tx: 150px;
		--ty: 50px;
	}
	#businessWrapper .cmnItemCircle.item02{
		width: 12px;
		height: 12px;
		--tx: 180px;
		--ty: 0;
	}
	#businessWrapper .cmnItemCircle.item03{
		width: 10px;
		height: 10px;
		--tx: 110px;
		--ty: -120px;
	}
	#businessWrapper .cmnItemCircle.item04{
		width: 8px;
		height: 8px;
		--tx: -50px;
		--ty: 210px;
	}
	#businessWrapper .cmnItemCircle.item05{
		width: 10px;
		height: 10px;
		--tx:  -4px;
		--ty: -17px;
	}
	#businessWrapper .cmnItemCircle.item06{
		width: 12px;
		height: 12px;
		--tx:  -100px;
		--ty: 95px;
	}
	#businessWrapper .cmnItemCircle.item07{
		width: 8px;
		height: 8px;
		--tx: -120px;
		--ty: 180px;
	}

	/* 社員を知る_丸
	============================== */
	/* 各アイテム */
	#peopleWrapper .cmnItemCircle.item01{
		width: 8px;
		height: 8px;
		--tx:  35px;
		--ty: 300px;
	}
	#peopleWrapper .cmnItemCircle.item02{
		width: 12px;
		height: 12px;
		--tx:  -170px;
		--ty: 90px;
	}
	#peopleWrapper .cmnItemCircle.item03{
		width: 10px;
		height: 10px;
		--tx:  120px;
		--ty: -380px;
	}
	#peopleWrapper .cmnItemCircle.item04{
		width: 8px;
		height: 8px;
		--tx: 25px;
		--ty: -240px;
	}
	#peopleWrapper .cmnItemCircle.item05{
		width: 10px;
		height: 10px;
		--tx:  -190px;
		--ty: -160px;
	}
	#peopleWrapper .cmnItemCircle.item06{
		width: 12px;
		height: 12px;
		--tx:  100px;
		--ty: 250px;
	}
	#peopleWrapper .cmnItemCircle.item07{
		width: 8px;
		height: 8px;
		--tx: 160px;
		--ty:  -320px;
	}

	
	/*
		下層ページ共通
	-----------------------------------------------------------------------------------------------*/
	/* KVエリア_丸
	============================== */
	/* 各アイテム */
	#cmnPageKvWrapper .cmnItemCircle.item01{
		--tx:  10px;
		--ty: -30px;
	}
	#cmnPageKvWrapper .cmnItemCircle.item02{
		--tx:  130px;
		--ty: 80px;
	}
	#cmnPageKvWrapper .cmnItemCircle.item03{
		--tx:  -160px;
		--ty:  85px;
	}
	#cmnPageKvWrapper .cmnItemCircle.item04{
		--tx: -175px;
		--ty: -5px;
	}
	#cmnPageKvWrapper .cmnItemCircle.item05{
		--tx: -70px;
		--ty:  -20px;
	}
	#cmnPageKvWrapper .cmnItemCircle.item06{
		--tx:  -60px;
		--ty:  85px;
	}
	#cmnPageKvWrapper .cmnItemCircle.item07{
		--tx:  -10px;
		--ty: 45px;
	}


	/*
		先輩社員インタビュー
	-----------------------------------------------------------------------------------------------*/
	/* KVエリア_丸
	============================== */
	/* 各アイテム */
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item01{
		width: 8px;
		height: 8px;
		--tx:  -110px;
		--ty: -60px;
	}
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item02{
		width: 12px;
		height: 12px;
		--tx:  100px;
		--ty: 40px;
	}
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item03{
		width: 10px;
		height: 10px;
		--tx:  -170px;
		--ty:  80px;
	}
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item04{
		width: 8px;
		height: 8px;
		--tx: -130px;
		--ty: -150px;
	}
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item05{
		width: 10px;
		height: 10px;
		--tx: 60px;
		--ty: -195px;
	}
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item06{
		width: 12px;
		height: 12px;
		--tx:  -40px;
		--ty:  185px;
	}
	.interviewPage #cmnPageKvWrapper .cmnItemCircle.item07{
		width: 8px;
		height: 8px;
		--tx: 100px;
		--ty:  -70px;
	}
}