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

.fadeInUp {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 1000ms;
}

.fadeInUp.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

/*横並びのリストとかで遅らせたいとき*/

/* 2つ目の要素に200msのdelayをかける */
#flow .inner ul li:nth-of-type(2) {
	-moz-transition-delay: 200ms;
	-webkit-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
}

/* 3つ目の要素に400msのdelayをかける */
#flow .inner ul li:nth-of-type(3) {
	-moz-transition-delay: 400ms;
	-webkit-transition-delay: 400ms;
	-o-transition-delay: 400ms;
	-ms-transition-delay: 400ms;
}

/* 4つ目の要素に400msのdelayをかける */
#flow .inner ul li:nth-of-type(4) {
	-moz-transition-delay: 600ms;
	-webkit-transition-delay: 600ms;
	-o-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
}

.tab-content {
	display: block;
	clear: both;
}

section {
	margin-bottom: 0;
}

.inner {
	margin: 0 auto 60px;
	max-width: 1200px;
	width: 90%;
}

.requirements table th {
	background: #ccc;
	border-bottom: 1px solid #d2d2d2;
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 170%;
	padding: 20px;
	text-align: center;
	vertical-align: top;
	width: 20%;
}

.requirements table td {
	background: #fff;
	border-bottom: 1px solid #d2d2d2;
	line-height: 170%;
	padding: 20px;
	width: 80%;
}

.requirements table td ul li {
	padding-left: 1em;
	text-indent: -1em;
}

.requirements table td ul:first-child {
	margin-bottom: 40px;
}

.btnWrap {
	/* margin-bottom: 180px; */
	margin-bottom: 40px;
}

.btnWrap .inner ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

@media(max-width:1200px) {
	.btnWrap .inner ul {
		flex-wrap: wrap;
	}
}

.btnWrap li.jobBtn01,
.btnWrap li.jobBtn02,
.btnWrap li.jobBtn03,
.btnWrap li.jobBtn04,
.btnWrap li.jobBtn05 {
	border-bottom: solid 3px #f2f5f9;
	color: #000000;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 15px;
	position: relative;
	/* width: 22%; */
	width: 17%;
}

.btnWrap li:before {
	content: " ";
	width: 50px;
	height: 3px;
	display: block;
	position: absolute;
	left: 0;
	bottom: -3px;
}

.btnWrap li.jobBtn01:before {
	background-color: #9cb7df;
	width: 84px;
}

.btnWrap li.jobBtn02:before {
	background-color: #c685cc;
	width: 141px;
}

.btnWrap li.jobBtn03:before {
	background-color: #bad450;
	width: 201px;
}

.btnWrap li.jobBtn04:before {
	background-color: #f19eb4;
	width: 142px;
}

.btnWrap li.jobBtn05:before {
	background-color: #8bd4d3;
	width: 142px;
}

.btnWrap li a {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.btnWrap li a:hover {
	text-decoration: none;
}

.btnWrap .arrow {
	display: inline-block;
	width: 2.0em;
	height: 0.4em;
	transform: skewX(40deg);
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-left: 10px;
	vertical-align: middle;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/*********sales*********/

#sales .salesTbl {
	position: relative;
}

#sales .salesTbl h2 {
	/*
	background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f5f8fc 51%, #f5f8fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
*/
	color: #fff;
	display: block;
	font-size: 110px;
	font-size: 11.0rem;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	top: -196px;
	left: 0;
	max-width: 1200px;
	margin: 0 auto 80px;
	text-align: center;
	/*
    text-stroke: 1px #000;
    -webkit-text-stroke: 2px #9cb7df;
*/
	text-shadow: 2px 2px 0 #9cb7df, -2px -2px 0 #9cb7df, -2px 2px 0 #9cb7df, 2px -2px 0 #9cb7df, 0px 2px 0 #9cb7df, 0 -2px 0 #9cb7df, -2px 0 0 #9cb7df, 2px 0 0 #9cb7df;
	width: 100%;
}

#sales {
	background: #f5f8fc;
	margin-top: 120px;
	scroll-margin-top: 180px;
	padding: 120px 0;
}

#sales .salesTbl table th {
	background: #9cb7df;
}

/*********director*********/

#director .inner {
	position: relative;
}

#director .inner h2 {
	/*
	background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #f9f3fa 51%, #f9f3fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
*/
	color: #fff;
	display: block;
	font-size: 100px;
	font-size: 10.0rem;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	top: -196px;
	left: 0;
	max-width: 1200px;
	margin: 0 auto 80px;
	text-align: center;
	/*
    text-stroke: 1px #000;
    -webkit-text-stroke: 2px #c685cc;
*/
	text-shadow: 2px 2px 0 #c685cc, -2px -2px 0 #c685cc, -2px 2px 0 #c685cc, 2px -2px 0 #c685cc, 0px 2px 0 #c685cc, 0 -2px 0 #c685cc, -2px 0 0 #c685cc, 2px 0 0 #c685cc;
	width: 100%;
}

#director {
	background: #f9f3fa;
	margin-top: 120px;
	scroll-margin-top: 180px;
	padding: 120px 0;
}

#director .directorTbl table th {
	background: #c685cc;
}

/*********director*********/

#artDirector .inner {
	position: relative;
}

#artDirector .inner h2 {
	/*
	background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #fbfcf4 51%, #fbfcf4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
*/
	color: #fff;
	display: block;
	font-size: 150px;
	font-size: 15.0rem;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	top: -196px;
	left: 0;
	max-width: 1200px;
	margin: 0 auto 80px;
	text-align: center;
	/*
    text-stroke: 1px #000;
    -webkit-text-stroke: 2px #abc930;
*/
	text-shadow: 2px 2px 0 #abc930, -2px -2px 0 #abc930, -2px 2px 0 #abc930, 2px -2px 0 #abc930, 0px 2px 0 #abc930, 0 -2px 0 #abc930, -2px 0 0 #abc930, 2px 0 0 #abc930;
	width: 100%;
}

#artDirector {
	background: #fbfcf4;
	margin-top: 120px;
	scroll-margin-top: 180px;
	padding: 120px 0;
}

#artDirector .artDirectorTbl table th {
	background: #abc930;
}

/*********designer*********/

#designer .inner {
	position: relative;
}

#designer .inner h2 {
	/*
	background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #fef5f7 51%, #fef5f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
*/
	color: #fff;
	display: block;
	font-size: 150px;
	font-size: 15.0rem;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	top: -196px;
	left: 0;
	max-width: 1200px;
	margin: 0 auto 80px;
	text-align: center;
	/*
    text-stroke: 1px #000;
    -webkit-text-stroke: 2px #f19eb4;
*/
	text-shadow: 2px 2px 0 #f19eb4, -2px -2px 0 #f19eb4, -2px 2px 0 #f19eb4, 2px -2px 0 #f19eb4, 0px 2px 0 #f19eb4, 0 -2px 0 #f19eb4, -2px 0 0 #f19eb4, 2px 0 0 #f19eb4;
	width: 100%;
}

#designer {
	background: #fef5f7;
	margin-top: 120px;
	scroll-margin-top: 180px;
	padding: 120px 0;
}

#designer .designerTbl table th {
	background: #f19eb4;
}

/* 240501 */
/*********coder*********/

#coder .inner {
	position: relative;
}

#coder .inner h2 {
	/*
	background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #fef5f7 51%, #fef5f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
*/
	color: #fff;
	display: block;
	font-size: 150px;
	font-size: 15.0rem;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	top: -196px;
	left: 0;
	max-width: 1200px;
	margin: 0 auto 80px;
	text-align: center;
	/*
    text-stroke: 1px #000;
    -webkit-text-stroke: 2px #8bd4d3;
*/
	text-shadow: 2px 2px 0 #8bd4d3, -2px -2px 0 #8bd4d3, -2px 2px 0 #8bd4d3, 2px -2px 0 #8bd4d3, 0px 2px 0 #8bd4d3, 0 -2px 0 #8bd4d3, -2px 0 0 #8bd4d3, 2px 0 0 #8bd4d3;
	width: 100%;
}

#coder {
	background: #ddeeee;
	margin-top: 120px;
	scroll-margin-top: 180px;
	padding: 120px 0;
}

#coder .coderTbl table th {
	background: #8bd4d3;
}

/* 240501ここまで */


@media only screen and (max-width: 1500px) {

	#sales .inner h2,
	#director .inner h2,
	#artDirector .inner h2,
	#designer .inner h2,
	#coder .inner h2 {
		font-size: 100px;
		font-size: 10.0rem;
		top: -170px;
	}
}

@media only screen and (max-width: 1323px) {
	.btnWrap li.jobBtn03:before {
		width: 141px;
	}
}

@media only screen and (max-width: 1024px) {

	.btnWrap li.jobBtn01,
	.btnWrap li.jobBtn02,
	.btnWrap li.jobBtn03,
	.btnWrap li.jobBtn04,
	.btnWrap li.jobBtn05 {
		font-size: 10px;
		font-size: 1rem;
	}

	.btnWrap li.jobBtn01:before {
		width: 64px;
	}

	.btnWrap li.jobBtn02:before {
		width: 107px;
	}

	.btnWrap li.jobBtn03:before {
		width: 107px;
	}

	.btnWrap li.jobBtn04:before {
		width: 109px;
	}

	.btnWrap li.jobBtn05:before {
		width: 109px;
	}
}

@media only screen and (max-width: 900px) {
	#footer {
		margin-top: 0;
	}

	#sales .inner h2,
	#director .inner h2,
	#artDirector .inner h2,
	#designer .inner h2,
	#coder .inner h2 {
		font-size: 80px;
		font-size: 8.0rem;
		top: -161px;
	}
}

@media only screen and (max-width: 800px) {

	.btnWrap li.jobBtn01,
	.btnWrap li.jobBtn02,
	.btnWrap li.jobBtn03,
	.btnWrap li.jobBtn04,
	.btnWrap li.jobBtn05 {
		width: 48%;
	}

	.btnWrap li.jobBtn03:before {
		width: 155px;
	}

	.btnWrap {
		margin-bottom: -40px;
	}
}

@media only screen and (max-width: 720px) {

	#sales,
	#director,
	#artDirector,
	#designer,
	#coder {
		padding: 60px 0 60px;
	}

	#sales .inner h2,
	#director .inner h2,
	#artDirector .inner h2,
	#designer .inner h2,
	#coder .inner h2 {
		font-size: 50px;
		font-size: 5.0rem;
		top: -85px;
	}
}

@media only screen and (max-width: 480px) {

	#sales .inner h2,
	#director .inner h2,
	#artDirector .inner h2,
	#designer .inner h2,
	#coder .inner h2 {
		font-size: 34px;
		font-size: 3.4rem;
		top: -81px;
	}

	.requirements table th,
	.requirements table td {
		display: block;
		font-size: 15px;
		font-size: 1.5rem;
		width: 100%;
	}

	.requirements table td .bold {
		display: block;
		margin-bottom: -20px;
	}
}

@media only screen and (max-width: 471px) {

	#sales,
	#designer,
	#coder,
	#artDirector,
	#director {
		scroll-margin-top: -40px;
	}

	.btnWrap li.jobBtn03:before {
		width: 107px;
	}
}

@-webkit-keyframes passingBar {
	0% {
		left: 0;
		right: auto;
		width: 0;
	}

	50% {
		left: 0;
		right: auto;
		width: 100%;
	}

	51% {
		left: auto;
		right: 0;
		width: 100%;
	}

	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}

@keyframes passingBar {
	0% {
		left: 0;
		width: 0;
	}

	50% {
		left: 0;
		width: 100%;
	}

	51% {
		left: 0;
		width: 100%;
	}

	100% {
		left: 100%;
		width: 0;
	}
}

@-webkit-keyframes passingTxt {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes passingTxt {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.passing .passingBar {
	position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.passing .passingBar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #4ec3d1;
}

.passing .passingTxt {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.passing.move .passingBar:before {
	-webkit-animation: passingBar 1s ease 0s 1 normal forwards;
	animation: passingBar 1s ease 0s 1 normal forwards;
}

.passing.move .passingTxt {
	-webkit-animation: passingTxt 0s ease .5s 1 normal forwards;
	animation: passingTxt 0s ease .5s 1 normal forwards;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	#sales .salesTbl h2 {
		background: none;
		font-family: 'Montserrat', sans-serif;
		color: #fff;
		text-stroke: 1px #000;
		-webkit-text-stroke: 2px #9cb7df;
		text-shadow: 2px 2px 0 #9cb7df, -2px -2px 0 #9cb7df, -2px 2px 0 #9cb7df, 2px -2px 0 #9cb7df, 0px 2px 0 #9cb7df, 0 -2px 0 #9cb7df, -2px 0 0 #9cb7df, 2px 0 0 #9cb7df;
		display: block;
	}

	#director .inner h2 {
		background: none;
		font-family: 'Montserrat', sans-serif;
		color: #fff;
		text-stroke: 1px #000;
		-webkit-text-stroke: 2px #c685cc;
		text-shadow: 2px 2px 0 #c685cc, -2px -2px 0 #c685cc, -2px 2px 0 #c685cc, 2px -2px 0 #c685cc, 0px 2px 0 #c685cc, 0 -2px 0 #c685cc, -2px 0 0 #c685cc, 2px 0 0 #c685cc;
		display: block;
	}

	#artDirector .inner h2 {
		background: none;
		font-family: 'Montserrat', sans-serif;
		color: #fff;
		text-stroke: 1px #000;
		-webkit-text-stroke: 2px #abc930;
		text-shadow: 2px 2px 0 #abc930, -2px -2px 0 #abc930, -2px 2px 0 #abc930, 2px -2px 0 #abc930, 0px 2px 0 #abc930, 0 -2px 0 #abc930, -2px 0 0 #abc930, 2px 0 0 #abc930;
		display: block;
	}

	#designer .inner h2 {
		background: none;
		font-family: 'Montserrat', sans-serif;
		color: #fff;
		text-stroke: 1px #000;
		-webkit-text-stroke: 2px #f19eb4;
		text-shadow: 2px 2px 0 #f19eb4, -2px -2px 0 #f19eb4, -2px 2px 0 #f19eb4, 2px -2px 0 #f19eb4, 0px 2px 0 #f19eb4, 0 -2px 0 #f19eb4, -2px 0 0 #f19eb4, 2px 0 0 #f19eb4;
		display: block;
	}

	#coder .inner h2 {
		background: none;
		font-family: 'Montserrat', sans-serif;
		color: #fff;
		text-stroke: 1px #000;
		-webkit-text-stroke: 2px #8bd4d3;
		text-shadow: 2px 2px 0 #8bd4d3, -2px -2px 0 #8bd4d3, -2px 2px 0 #8bd4d3, 2px -2px 0 #8bd4d3, 0px 2px 0 #8bd4d3, 0 -2px 0 #8bd4d3, -2px 0 0 #8bd4d3, 2px 0 0 #8bd4d3;
		display: block;
	}
}

/* header調整 */
@media (max-width: 1500px) {
	#header {
		height: 96px;
	}

	#header .logo a img {
		width: 270px;
	}

	#gNav ul li a.normal {
		font-size: 1.2rem;
	}

	#gNav ul li:last-child {
		height: 96px;
	}

	#gNav ul li a.official {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 0 15px;
	}

	#gNav ul li a.entry {
		display: flex;
		height: 100%;
		padding: 0 25px;
		font-size: 1.3rem;
		justify-content: center;
		align-items: center;
	}

	#gNav ul li:nth-last-of-type(2) {
		height: 96px;
	}

	#gNav ul li a.official span {
		font-size: 1.3rem;
	}
}

@media only screen and (max-width: 1350px) {

	#gNav ul li:last-child a,
	#gNav ul li a.entry {
		padding: 0 20px;
	}
}

@media only screen and (max-width: 1140px) {

	#gNav ul li:last-child a,
	#gNav ul li a.entry {
		padding: 0 12px;
	}

	#gNav a.requirements {
		font-size: 1.2rem;
	}
}

#contents p.large {
	font-size: larger;
	text-align: center;
	margin-top: 0.5em;
	text-decoration: underline;
}

@media (max-width:640px) {
	.banner__wrap {
		width: 100%;
		margin: 0;
	}
}

.banner__wrap img {
	max-width: 100%;
	height: auto;
}

#sales,
#director,
#artDirector,
#designer,
#coder {
	margin-top: 11vw;
}