@charset "utf-8";

/*===========================================================

eyecatch

============================================================= */

#eyecatch {
	background:url(../img/eyecatch.jpg) center center no-repeat;
	background-size:cover;
	width:100%;
	height:40vh;
	position:relative;
}

#page_title {
	width:290px;
	padding:0.8em 0;
	text-align:center;
	background:rgba(131,198,190,0.85);
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-145px;
}

#page_title * {
	color:#fff;
}

#page_title .en {
	font-size:1.2rem;
	letter-spacing:2px;
}

#page_title h1 {
	font-weight:bold;
	font-size:2rem;
}

@media screen and (max-width:440px){
	#page_title .en {
		font-size:1rem;
	}
	#page_title h1 {
		font-size:1.8rem;
	}
}

/*===========================================================

content

============================================================= */
#content h2 {
	display:table;
	margin:0 auto 5% auto;
	font-size:2rem;
	font-weight:bold;
	border-bottom:1px solid #E83416;
	color:#606060;
	padding:0.3em 0.5em;
}

@media screen and (max-width:500px){
	#content h2 {
		font-size:1.6rem;
	}
}

/*===========================================================

lead

============================================================= */
#content .cont_head {
	background:#fff;
}
#content .lead {
	width:94%;
	max-width:1200px;
	margin:0 auto;
	padding:8% 0 5% 0;
	text-align:center;
	line-height:2;
}

@media screen and (max-width:640px){
	#content .lead {
		font-size:1.4rem;
	}
}


/*===========================================================

column_link

============================================================= */
#content .column_link {
	width:94%;
	max-width:450px;
	margin:0 auto;
	padding:0 0 8% 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	justify-content:space-between;
}

#content .column_link li{
	width:48%;
}

#content .column_link li a {
	display:block;
	border:1px solid #83C6BE;
	text-align:center;
	font-weight:bold;
	color:#83C6BE;
	padding:0.8em 0 0.4em 0;
	position:relative;
	line-height:1;
}

#content .column_link li a:after {
	font-family: "Font Awesome 5 Free";
	content: "\f0dd";
	-webkit-font-smoothing: antialiased;
	display: block;
	width:100%;
	text-align:center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-weight: 900;
	font-size:2rem;
	line-height:1;
}

@media screen and (max-width:440px){
	#content .column_link li a {
		font-size:1.4rem;
	}
}

/*===========================================================

works_list

============================================================= */
#works_list {
	background:#F0EBE1;
	padding:5% 0;
}

#works_list ul {
	width:94%;
	max-width:1200px;
	margin:0 auto;
	margin-top:-2%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	justify-content:space-between;
}

#works_list ul li {
	width:calc( 94% / 4 );
	margin-top:2%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
}

#works_list ul > * a {
	display:block;
	width:100%;
	background:#fff;
	transition:0.5s;
}

#works_list ul > * a:hover {
	opacity:0.8;
	transition:0.5s;
}

#works_list ul > * a .catch {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items:center;
	-moz-align-items:center;
	-ms-align-items:center;
	align-items:center;
	-webkit-justify-content:center;
	-moz-justify-content:center;
	-ms-justify-content:center;
	justify-content:center;
	height:4em;
	line-height:1.4;
	width:100%;
	color:#fff;
	text-align:center;
}

#works_list .outsourcing_wrap .catch {
	background:#87C2D9;
}

#works_list .talent_wrap .catch {
	background:#83C6BE;
}

#works_list .support_wrap .catch {
	background:#5B89B9;
}

#works_list ul a .name {
	display:block;
	width:100%;
	padding:1em;
	text-align:center;
	font-size:1.4rem;
}

#works_list ul a .name:after {
	font-family: "Font Awesome 5 Free";
	content: "\f0dd";
	-webkit-font-smoothing: antialiased;
	display: block;
	width:100%;
	text-align:center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-weight: 900;
	font-size:3rem;
	padding:0;
	line-height:2rem;
}

#works_list .outsourcing_wrap .name:after {
	color:#87C2D9;
}

#works_list .talent_wrap .name:after {
	color:#83C6BE;
}

#works_list .support_wrap .name:after {
	color:#5B89B9;
}

@media screen and (max-width:900px){
	#works_list ul li {
		width:calc( 98% / 2 );
	}
}

@media screen and (max-width:540px){
	#works_list a .catch {
		font-size:1.4rem;
	}
}

@media screen and (max-width:440px){
	#works_list ul a .catch {
		font-size:1.2rem;
	}
	#works_list ul a .name {
		font-size:1.3rem;
	}
	#works_list ul a .name:after {
		font-size:2rem;
	}
}

/*===========================================================

mission

============================================================= */
#mission {
}
#mission .config {
	width:94%;
	max-width:1200px;
	margin:0 auto;
	padding:8% 0;
}

#mission .fig {
	text-align:center;
}

/*===========================================================

group_works

============================================================= */
#group_works {
	padding:8% 0;
}
#group_works > * {
	width:94%;
	max-width:1200px;
	margin:0 auto;
}

/* midashi */
#group_works .midashi h2 {
	margin-bottom:3%;
}

#group_works .midashi p {
	text-align:center;
}

@media screen and (max-width:620px){
	#group_works .midashi p br {
		display:none;
	}
}

@media screen and (max-width:480px){
	#group_works .midashi p {
		font-size:1.4rem;
	}
}

#group_works .cir {
	width:8em;
	height:8em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-justify-content:center;
	-moz-justify-content:center;
	-ms-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	-moz-align-items:center;
	-ms-align-items:center;
	align-items:center;
	margin:0 auto;
	text-align:center;
	border:10px solid #ccc;
	border-radius:999px;
	font-weight:bold;
	color:#333333;
	line-height:1.4;
	background:#fff;
	margin-bottom:3em;
}

@media screen and (max-width:480px){
	#group_works .cir {
		border:6px solid #ccc;
		font-size:1.2rem;
	}
}

#group_works .line {
	width:100%;
	max-width:580px;
	margin:0 auto;
	text-align:center;
	position:relative;
}

#group_works .line:after {
	display:block;
	content:'';
	width:100%;
	height:1px;
	background:#456688;
	position:absolute;
	top:50%;
	left:0;
	z-index:1;
}

#group_works .line span {
	display:inline-block;
	line-height:1.4;
	padding:0 2em;
	background:#fff;
	font-size:1.8rem;
	font-weight:500;
	color:#606060;
	position:relative;
	z-index:2;
}

@media screen and (max-width:480px){
	#group_works .line span {
		font-size:1.4rem;
	}
}

#group_works .lineup {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	justify-content:space-between;
}

#group_works .lineup > * {
	width:48%;
	margin-top:8%;
	position:relative;
	padding:1em 1em 3.6em 1em;
}

#group_works .lineup > *.mv {
	padding-bottom:1em;
}

#group_works .lineup > * .label {
	display:table;
	background:#456688;
	color:#fff;
	line-height:1;
	padding:0.5em 1em;
	position:absolute;
	bottom:calc( 100% + 5px );
	left:0;
}

#group_works .lineup > * h5 {
	font-size:2.2rem;
	font-weight:bold;
	color:#fff;
	margin-bottom:0.5em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items:center;
	-moz-align-items:center;
	-ms-align-items:center;
	align-items:center;
	width:100%;
	
}

#group_works .lineup > * .text {
	width:100%;
	background:rgba(255,255,255,0.95);
	padding:1em;
	font-size:1.4rem;
	line-height:1.8;
}

#group_works .lineup > * .movie {
	margin-top:10px;
	position:relative;
	height:158px;
	padding-left:5.5em;
}

#group_works .lineup > * .movie p {
	width:8em;
	height:8em;
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	color:#5B89B9;
	background:#fff;
	border-radius:50%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-justify-content:center;
	-moz-justify-content:center;
	-ms-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	-moz-align-items:center;
	-ms-align-items:center;
	align-items:center;
	position:absolute;
	top:50%;
	left:0;
	margin-top:-4em;
	z-index:1;
}

#group_works .lineup > * .movie .thumb {
	width:242px;
	height:157px;
	position:relative;
	z-index:2;
	background:#fff;
}

#group_works .lineup > * .movie .thumb img:hover {
	opacity:0.8;
}

#group_works .lineup > * .more_link {
	position:absolute;
	bottom:1em;
	right:1em;
	text-align:right;
}

#group_works .lineup > * .more_link a {
	display:inline-block;
	line-height:1;
	padding:0.5em 1em;
	color:#5B89B9;
	background:rgba(255,255,255,0.95);
	font-size:1.4rem;
	position:relative;
}

#group_works .lineup > * .more_link a:hover {
	opacity:0.8;
}

#group_works .lineup > * .more_link a:after {
	display:inline-block;
	content:'＞';
	margin-left:5px;
	font-size:1.2rem;
}

#group_works .lineup > * .more_link a:before {
	display:block;
	content:'';
	width:100%;
	height:100%;
	border:1px solid #fff;
	position:absolute;
	bottom:-3px;
	right:-3px;
}


#client,
#support {
	padding:5% 0;
}

#client .cir {
	border-color:#87C2D9;
}

#support .cir {
	border-color:#5B89B9;
	margin-bottom:0;
}

#outsourcing_wrap .lineup > * {
	background:#87C2D9;
}

#talent_wrap {
	margin-top:8%;
}

#talent_wrap .lineup {
	display:block;
}

#talent_wrap .lineup > * {
	margin:8% auto 0 auto;
	background:#83C6BE;
}

#support_wrap .lineup > * {
	background:#5B89B9;
}


@media screen and (max-width:1120px){
	#group_works .lineup > *.mv {
		padding-bottom:3.6em;
	}
}

@media screen and (max-width:1000px){
	#group_works .lineup > * {
		width:49%;
	}
}

@media screen and (max-width:880px){
	#client,
	#support {
		width:100%;
	}
	#group_works .lineup > * {
		width:100%;
		margin-top:10%;
	}
	#group_works .lineup > * .movie {
		display:table;
		margin:1em auto 0 auto;
	}
	#group_works .lineup > * .more_link {
		width:100%;
		text-align:center;
	}
}

@media screen and (max-width:570px){
	#group_works .lineup > * {
		margin-top:14%;
	}
}

@media screen and (max-width:480px){
	#group_works .lineup > * {
		margin-top:16%;
	}
	#group_works .lineup > * .label {
		font-size:1.4rem;
	}
	#group_works .lineup > * h5 {
		font-size:1.8rem;
	}
	#group_works .lineup > * .text {
		font-size:1.4rem;
	}
}


/*===========================================================

career_step

============================================================= */
#career_step {
	padding:8% 0;
}

#career_step .config {
	width:94%;
	max-width:1200px;
	margin:0 auto;
}

#career_step .midashi {
	display:table;
	border-bottom:1px solid #E83416;
	padding-bottom:0.3em;
	margin-bottom:30px;
}

#career_step .midashi > * {
	display:inline-block;
}

#career_step .midashi h4 {
	font-size:1.8rem;
	font-weight:bold;
	margin-right:1em;
}

#career_step .midashi h4:before {
	display:inline-block;
	content:'●';
	color:#E83416;
}

#career_step .fig_sp {
	display:none;
}

#career_step .summary {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	justify-content:space-between;
	background:#fff;
}

#career_step .summary dl {
	width:19%;
	
}

#career_step .summary dt {
	text-align:center;
	color:#fff;
	font-weight:bold;
	line-height:1;
	padding:0.5em 0;
}

#career_step .summary dd {
	font-size:1.4rem;
	padding:0.5em 0;
}

#career_step .associate {
	border-bottom:2px solid #83C6BE;
}
#career_step .associate dt {
	background:#83C6BE;
}

#career_step .group_leader {
	border-bottom:2px solid #87C2D9;
}
#career_step .group_leader dt {
	background:#87C2D9;
}

#career_step .manager {
	border-bottom:2px solid #5B89B9;
}
#career_step .manager dt {
	background:#5B89B9;
}

#career_step .expert {
	border-bottom:2px solid #87C2D9;
}
#career_step .expert dt {
	background:#87C2D9;
}

#career_step .professional {
	border-bottom:2px solid #5B89B9;
}
#career_step .professional dt {
	background:#5B89B9;
}

@media screen and (max-width:940px){
	#career_step .summary dt {
		font-size:1.4rem;
	}
}

@media screen and (max-width:620px){
	#career_step .midashi {
		border-bottom:0;
		display:block;
	}
	#career_step .midashi h4 {
		display:table;
		border-bottom:1px solid #E83416;
		padding-bottom:0.3em;
		margin-bottom:0.3em;
	}
		
}

@media screen and (max-width:780px){
	#career_step .fig_sp {
		display:block;
	}
	#career_step .fig_pc {
		display:none;
	}
	#career_step .summary {
		display:block;
	}
	#career_step .summary dl {
		width:100%;
		margin-top:20px;
		border-bottom:none;
	}
	#career_step .summary dt {
		display:table;
		padding:0.5em 1em;
	}
}

@media screen and (max-width:480px){
	#career_step .midashi p {
		font-size:1.4rem;
	}
}