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

 page-top.css

---------------------------------------------------------*/
.contents-area {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 5%;
}
.contents-inner {
	padding: 1rem 1.75rem 1.5rem;
}
.contents-fbox {
	display: flex;
	flex-wrap: wrap;
}
.contents-title {
	color: var(--main);
	font-size: 2.125rem;
	font-family: var(--marugo);
	font-weight: 900;
  font-style: normal;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
.contents-title-jp {
	display: inline-block;
	color: var(--text);
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0;
	padding-left: 1em;
}
@media screen and (max-width: 767px) {
	.contents-inner {
		padding: 1rem 1rem 2rem;
	}
}



/* Top Visual
--------------------------------------------------------*/
.topvisual {
	padding: 5px;
}


/* News
--------------------------------------------------------*/
#news.contents {
	padding: 4rem 0 7rem;
}
#news .contents-fbox {
	gap: 1rem 3.75rem;
}
.news-heading .btn {
	margin-top: 0;
}
.news-list {
  width: calc(100% - calc(15rem + 3.75rem));
}
@media screen and (max-width: 767px) {
	.news-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.news-heading .btn {
		width: 40%;
		margin: 0;
	}
	.news-list {
    width: 100%;
  }
}


/* Service
--------------------------------------------------------*/
.service {
	padding: 2.5rem 0 5rem;
	margin-bottom: 3rem;
	background: var(--pale-blue);
	position: relative;
}
.shape-top {
  position: absolute;
  top: -5rem;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.shape-top svg {
  position: relative;
  display: block;
  width: calc(140% + 1.3px);
  height: 5rem;
  transform: scale(1, -1);
}
.shape-top .shape-fill {
  fill: var(--pale-blue);
}
.service-heading {
	font-family: var(--marugo);
	font-weight: 700;
  font-style: normal;
	text-align: center;
	font-size: 1.875rem;
	letter-spacing: 2px;
	margin-bottom: 1.75rem;
}
.service-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 1.875rem;
}
.service-menu-card {
	display: block;
	width: calc(50% - 1rem);
	max-width: 360px;
	border-radius: 1.563rem 1.563rem 0 0;
	box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
	overflow: hidden;
	/*transition: all 0.2s ease;*/
}
.service-menu-card:hover {
	opacity: 0.75;
}
.service-menu-card img {
	height: 12.5rem;
	object-fit: cover;
	transition: all 0.35s ease;
}
.service-menu-card:hover img {
	transform: scale(1.1);
}
.service-title {
	color: var(--white);
	font-size: 1.125rem;
	font-weight: 600;
	padding: 0.5rem 0.5rem 0.65rem 1rem;
	position: relative;
}
.service-title::after {
	display: inline-block;
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background: url(../images/icon-arrow2.svg) no-repeat;
	background-size: 75%;
	position: absolute;
	top: 35%;
	right: 0.5rem;
}
.service-menu-card:nth-of-type(1) .service-title { background:#339cc3; }
.service-menu-card:nth-of-type(2) .service-title { background:#d95948; }
.service-menu-card:nth-of-type(3) .service-title { background:#ccc747; }
.service-menu-card:nth-of-type(4) .service-title { background:#aa8259; }
.service-menu-card:nth-of-type(5) .service-title { background:#e3a633; }
.service-menu-card:nth-of-type(6) .service-title { background:#5ab7ad; }

@media screen and (max-width: 767px) {
	.service-heading {
		font-size: 6vw;
		letter-spacing: 0;
	}
	.service-menu {
		gap: 1.5rem;
	}
	.service-menu-card {
		width: 100%;
		max-width: 100%;
	}
}


/* Company
--------------------------------------------------------*/
#company.contents {
	/*width: 66.67%;
	max-width: 50rem;*/
	width: 50%;
	display: flex;
	flex-direction: column;
}
#company .contents-fbox {
	height: 100%;
	background: var(--white);
}
/*.company-img,
#company .contents-inner {
	width: 50%;
}*/
.company-img img {
	object-fit: cover;
}
#company .contents-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: 600;
}
@media screen and (max-width: 767px) {
	#company.contents,
	.company-img,
	#company .contents-inner {
		width: 100%;
	}
}
@media screen and (min-width: 1200px) {
	.company-img {
		max-height: 18.75rem;
	}
}

/* Recruit
--------------------------------------------------------*/
#recruit.contents {
	/*width: 28.33%;
	max-width: 21.25rem;*/
	width: 45%;
}
/*#recruit .contents-title{
	padding-bottom: 0.5rem;
	background: #f8f8f8;
}*/
#recruit .contents-inner {
	background: var(--white);
}
#recruit p {
	color: var(--light-gray);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1.25rem;
}
#recruit .bnr {
	display: block;
	max-width: 18.75rem;
	margin: 0.5rem auto;
	border: 1px solid #dedede;
}
#recruit .bnr:hover {
	opacity: 0.75;
}
@media screen and (max-width: 767px) {
	#recruit.contents {
		width: 100%;
		max-width: 100%;
	}
}