@charset "utf-8";
/* ===================================================================
  hero-img
=================================================================== */
.heroWrapper {
	/* position: absolute; */
	/* top: 0; */
	width: 100%;
	height: 145px;
	padding-top: 105px;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

.heroImg--company {
	background-image: url(../img/sp-hero-company.jpg);
}
.heroImg--recruit {
	background-image: url(../img/sp-hero-recruit.jpg);
}
.heroImg--system {
	background-image: url(../img/sp-hero-systems.jpg);
}
.heroImg--contents {
	background-image: url(../img/sp-hero-contents.jpg);
}
.heroImg--skystyle {
	background-image: url(../img/sp-hero-skystyle.jpg);
}
.heroImg--entry {
	background-image: url(../img/sp-hero-entry.jpg);
}
.heroImg--other {
	background-image: url(../img/sp-hero-other.jpg?2308);
}
.heroImg--registration {
	background-image: url(../img/sp-hero-registration.jpg);
}
.heroImg--event {
	background-image: url(../img/sp-hero-event.jpg);
}
.heroImg--beginner {
	background-image: url(../img/sp-hero-beginner.jpg);
}
.heroImg--casual {
	background-image: url(../img/sp-hero-casual.jpg);
}

@media screen and (min-width: 48em) {
	.heroWrapper {
		width: 100%;
		height: 200px;
		padding-top: 130px;
	}
	.heroImg--company {
		background-image: url(../img/hero-company.jpg);
	}
	.heroImg--recruit {
		background-image: url(../img/hero-recruit.jpg);
	}
	.heroImg--system {
		background-image: url(../img/hero-systems.jpg);
	}
	.heroImg--contents {
		background-image: url(../img/hero-contents.jpg);
	}
	.heroImg--skystyle {
		background-image: url(../img/hero-skystyle.jpg);
	}
	.heroImg--entry {
		background-image: url(../img/hero-entry.jpg);
	}
	.heroImg--other {
		background-image: url(../img/hero-other.jpg?2308);
	}
	.heroImg--registration {
		background-image: url(../img/hero-registration.jpg);
	}
	.heroImg--event {
		background-image: url(../img/hero-event.jpg);
		background-position: center;
	}
	.heroImg--beginner {
		background-image: url(../img/hero-beginner.jpg);
	}
	.heroImg--casual {
		background-image: url(../img/hero-casual.jpg);
	}
}
/* ===================================================================
  pageTitle
=================================================================== */
.pageTitle {
	width: 90%;
	transform: translateY(25px);
}
.pageTitle__text {
	font-size: 23px;
	font-weight: 500;
	margin: 0;
	padding: 16px 10% 0 5%;
	background-color: white;
	letter-spacing: 0;
}
.pageTitle__text--software {
	font-size: 18px;
}
.pageTitle__text--sub {
	font-size: 12px;
	font-weight:400;
	display: block;
	margin-bottom: 5px;
}
.pageTitle__text > span {
	font-size: 10px;
	display: block;
	color: #5ACDDB;
}

.pageTitle__text > .pageTitle__sub {
	font-size: 1rem;
	display: inline-block;
	color: #444444;
}

@media screen and (min-width: 48em) {
	.pageTitle {
		position: relative;
		width: min(100%, 1200px);
		transform: translateY(0);
		margin: auto;
	}
	.pageTitle::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: -100vw;
		display: block;
		width: 100vw;
		height: 100%;
		background: white;
	}
	.pageTitle__text {
		font-size: 36px;
		display: inline-block;
		padding: 28px 100px 0 40px;
	}
	.pageTitle__text--sub {
		font-size: 18px;
		display: block;
		margin-bottom: 10px;
	}
	.pageTitle__text > span {
		font-size: 14px;
		display: block;
		margin-top: 5px;
		color: #5ACDDB;
	}
}
/* ===================================================================
  bread crumb
=================================================================== */
.breadCrumbWrapper {
	padding-top: var(--header);
	background: #F2F6F9;
}
.breadCrumb {
	margin: 0 auto;
	padding: 10px 5%;
	list-style: none;
	display: flex;
	gap: 4px 12px;
	flex-wrap: wrap;
	width: min(100%, 1200px);
	box-sizing: border-box;
}
.breadCrumb__item {
	margin: 0;
	padding: 0;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}
.breadCrumb__item:not(:last-of-type)::after {
	content: "";
	display: block;
	border-top: 1px solid #31C1D2;
	border-right: 1px solid #31C1D2;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
}
.breadCrumb__item a {
	color: #444;
}
@media screen and (min-width: 48em) {
	.breadCrumb {
		padding: 16px 40px;
		gap: 4px 20px;
	}
	.breadCrumb__item {
		font-size: 13px;
		gap: 16px;
	}
}

/* ===================================================================
  contents
=================================================================== */
.display-pc {
	display: none;
}
.contentWrapper {
	position: relative;
	overflow: hidden;
	overflow: clip;
}
.contentWrapper--sub {
	padding: 60px 0 0 0;
}
.contents {
	position: relative;
	max-width: 75em;
	margin: 0 auto;
	padding: 0 5%;
}
.contents > *:first-child {
	margin-top: 0;
}
.contents > *:last-child {
	margin-bottom: 0;
}
.contents--large {
	/* 1000px */
	max-width: 62.50em;
}
.contents--middle {
	/* 900px */
	max-width: 56.25em;
}
.contents--small {
	/* 820px */
	max-width: 51.25em;
}
.contents--xsmall {
	/* 740px */
	max-width: 46.25em;
}
.contents--block {
	margin-top: 10% ;
	margin-bottom: 10% ;
}
.l-contents > .contents--block:first-child {
	margin-top: 0 ;
}
.l-contents > .contents--block:last-child {
	margin-bottom: 0 ;
}
.l-contents {
	padding: 72px 0 15%;
}
.contents__title {
	font-size: 22px;
	margin: 0 0 2em 0;
	text-align: center;
}
.contents__title:after {
	display: block;
	width: 2em;
	height: 3px;
	margin: 5px auto 0;
	content: "";
	background-color: #31C1D2;
}
.contents__title--white {
	color: #FFFFFF;
}
.contents__title--sm {
	font-size: 1.2em;
}
.contents__title__sub {
	font-size: .7em;
	display: block;
}
.contents__headerLv1 {
	font-size: 22px;
	margin: 0 0 1em 0;
	text-align: center;
	color: #14A0DC;
}
.contents__headerLv2 {
	font-size: 18px;
	font-weight:400;
	line-height: 1.4;
	margin: 0 0 1em 0;
	padding: 0 0 .6em 0;
	border-bottom: 1px solid #31C1D2;
}
.contents__lead {
	margin: 0 0 2em 0;
}
.contents__lead br {
	display: none;
}
.contents__lead--strong {
	margin: 0 0 1em 0;
}
.contents__block {
	margin: 5% 0;
}
.contents__block > *:not(.pure-g--box):first-child {
	margin-top: 0;
}
.contents__block > *:not(.pure-g--box):last-child {
	margin-bottom: 0;
}
.contents__block--margin-sm {
	margin: 3% 0;
}
.contents__block--margin-lg {
	margin: 8% 0;
}
.contents__block--box {
	padding: 5%;
	border: 1px solid #E2E7EC;
	background: #FFFFFF;
}
.contents__block--box > *:first-child {
	margin-top: 0;
}
.contents__block--box > *:last-child {
	margin-bottom: 0;
}
.contents__block--box--padding-sm {
	padding: 3%;
}
.contents__block--box--padding-lg {
	padding: 8%;
}
@media screen and (min-width: 35.5em) {
	.display-sp {
		display: none;
	}
	.display-pc {
		display: block;
	}
	.contents--block {
		margin-top: 5em;
		margin-bottom: 5em;
	}
	.l-contents > .contents--block:first-child {
		margin-top: 0 ;
	}
	.l-contents > .contents--block:last-child {
		margin-bottom: 0;
	}
	.contents__title {
		font-size: 30px;
		margin: 0 0 2em 0;
	}
	.contents__title:after {
		display: block;
		width: 2em;
		height: 3px;
		margin: 15px auto 0;
		content: "";
		background-color: #31C1D2;
	}
	.contents__title--sm {
		font-size: 1.6em;
	}
	.contents__headerLv1 {
		font-size: 30px;
	}
	.contents__headerLv2 {
		font-weight: 400;
	}
	.contents__lead {
		line-height: 1.8;
		margin: 0 0 2em 0;
	}
	.contents__lead br {
		display: block;
	}
	.contents__lead--strong {
		margin: 0 0 1em 0;
	}
	.contents__block {
		margin: 3em 0;
	}
	.contents__block--margin-sm {
		margin: 1em 0;
	}
	.contents__block--margin-lg {
		margin: 5em 0;
	}
}

@media screen and (min-width: 48em) {
	.contents__lead {
		text-align: center;
	}
	.l-contents {
		padding: 126px 0 5em;
	}
	.contentWrapper--sub {
		padding: 80px 0 0 0;
	}
}
/* ページ注釈; */
.present-time {
	font-size: .75em;
	display: block;
	padding: 20px 0 0;
	text-align: right;
	border-top: 1px solid #E6E6E6;
}
@media screen and (min-width: 48em) {
	.present-time {
		font-size: .875em;
	}
}

/* ===================================================================
  記事一覧
=================================================================== */
.articleCard__list {
	position: relative;
	margin-bottom: 5%;
	padding-bottom: 5%;
	border-bottom: 1px dotted #CCCCCC;
}
.articleCard__list a {
	display: flex;
}
.articleCard__new {
	position: relative;
	display: block;
}
.articleCard__new::after {
	font-family: "Oswald";
	font-size: 10px;
	font-weight:400;
	line-height: 30px;
	position: absolute;
	z-index: 1;
	top: -10px;
	left: -10px;
	width: 30px;
	height: 30px;
	content: "New";
	text-align: center;
	color: #FFFFFF;
	border-radius: 25px;
	background-color: #31C1D2;
}
.articleCard__list--pic {
	width: 40%;
	min-width: 100px;
}
.articleCard__list--detail {
	font-size: 14px;
	width: 60%;
	padding: 0 0 0 15px;
	color: #444444;
}
.articleCard__list--detail > .articleCard__list--detail__text{
	font-size: 13px;
	margin-top: 13px;
	margin-bottom: 0;
}
.intro {
	align-items: center;
	margin: 0;
	padding: 0;
}
.intro li {
	list-style: none;
}
.intro__key {
	font-size: .7em;
	display: inline-block;
	align-self: flex-start;
	padding: 0 .2em 0 .3em;
	text-align: center;
	color: #FFFFFF;
}
.interview {
	background-color: #14A0DC;
}
.movie {
	background-color: #F38343;
}
.crosstalk {
	background-color: #4CAF50;
}
.data {
	background-color: #FF9900;
}
.report {
	background-color: #505FB4;
}
.recruit {
	background-color: #277BDA;
}
.interview::before,
.crosstalk::before,
.movie::before,
.data::before,
.report::before,
.recruit::before {
	font-family: "Oswald";
	font-weight:400;
}
.interview::before {
	content: "INTERVIEW";
}
.crosstalk::before {
	content: "CROSSTALK";
}
.movie::before {
	content: "MOVIE";
}
.data::before {
	content: "DATA";
}
.report::before {
	content: "REPORT";
}
.recruit::before {
	content: "RECRUIT";
}
.intro__job {
	font-size: 10px;
}
.title > h3 {
	line-height: 1.4;
	margin: 0;
}
.articleCard__title > h3 {
	line-height: 1.4;
	margin: 0;
}
.articleCard__title > p {
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
}
.l-contents--pickup {
	padding: 10% 0;
	background: #eef9ff;
}
.l-contents--pickup + .l-contents--pickup{
	padding-top: 0;
}
.contents--pickup__title {
	font-size: 1.2em;
	margin-top: 0;
	margin-bottom: 10%;
	text-align: center;
}
.contents--pickup__title::after {
	display: block;
	width: 2em;
	height: 3px;
	margin: .4em auto 0;
	content: "";
	background-color: #31C1D2;
}
.articleButton {
	margin: 2rem auto 0;
	text-align: center;
}
@media only screen and (min-width: 48em) {
	.contents--article,
	.contents--article-engineer,
	.contents--article-job {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5%;
	}
	.articleCard__list {
		margin-bottom: 50px;
		padding-bottom: 0;
		border-bottom: none ;
	}
	.articleCard__list--detail > .articleCard__list--detail__text{
		font-size: 15px;
		margin-top: 15px;
	}
	.articlecard {
		width: 30%;
	}
	.articlecard:nth-child(3n) {
		margin-right: 0;
	}
	.articleCard__list a {
		flex-wrap: wrap;
	}
	.articleCard__new::after {
		font-size: 14px;
		line-height: 50px;
		top: -15px;
		left: -15px;
		width: 50px;
		height: 50px;
	}
	.articleCard__list--pic {
		width: 100%;
	}
	.articleCard__list--detail {
		width: 100%;
		padding: 0;
	}
	.title > h3 {
		font-size: .9em;
	}
	.articleCard__title{
		margin-top: 16px;
	}
	.articleCard__title > h3 {
		font-size: 16px;
	}
	.articleCard__title > p {
		font-size: 14px;
	}
	.intro {
		display: flex;
		margin: 5% 0 0;
	}
	.intro__job {
		font-size: 12px;
		display: inline;
		margin-left: 3%;
	}
	.intro__key {
		font-size: .74em;
	}
	.title {
		margin: 5% 0 0;
		font-size: 17px;
	}
	.l-contents--pickup {
		padding: 5em 0;
	}
	.contents--pickup__title {
		font-size: 2em;
		font-weight: 500;
		margin-top: 0;
		margin-bottom: 1.6em;
	}
	.contents--pickup__title::after {
		margin: .6em auto 0;
	}
}


/* ===================================================================
  footer
=================================================================== */

/* 共通リンク部分 */
.l-footerlink {
	border-top: 1px solid #E6E6E6;
}
.footerlink {
	max-width: 1200px !important;
}
.footer {
	font-size: 13px;
	color: #FFFFFF;
}
.footer__inner {
	margin: 0;
	padding: 0;
}
.footer__list__item {
	margin: 0;
	padding: 0 20px 0;
	list-style: none;
	color: #FFFFFF;
}
.footer__list__item a {
	display: block;
	padding: 14px 0;
	color: #444444;
	border-bottom: 1px solid #DFDFDF;
}
.footer__list__item a:hover {
	opacity: .7;
}
.footer__list__item:nth-child(3) a {
	border: none;
}
.footer__list__item-last {
	margin-left: auto;
	padding: 0;
}
.footer__list__item-last a {
	display: inline;
	color: #FFFFFF;
	border: none;
}
.footer__list__item-last {
	padding: 20px 0;
	text-align: center;
	background: #05203E;
}

@media only screen and (min-width: 48em) {
	.footer {
		padding: 30px 0;
		background: #05203E;
	}
	.footer__inner {
		display: flex;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 5%;
		background: none;
	}
	.footer__list__item {
		padding: 0;
	}
	.footer__list__item a {
		padding: 0 30px 0 0;
		color: #FFFFFF;
		border: none;
	}
	.footer__list__item:nth-last-child(1) a {
		padding: 0;
	}
	.footer__list__item-last {
		padding: 0;
	}
}