@charset "utf-8";

:root {
	--black: #343434;
	--gray-700: #949494;
	--white: #FFF;
	--blue-50: #F0F8FF;
	--blue-300: #A8D1F7;
	--blue-600: #60A9EE;
	--blue-700: #408CD4;
	--blue-900: #00529F;
	--text-grad: linear-gradient(95deg, #00529F -0.02%, #60A9EE 49.98%, #4296E5 99.98%);
	--hover-grad: linear-gradient(95deg, var(--blue-700) -0.02%, var(--blue-300) 49.98%, var(--blue-600) 99.98%);
}

html {
  scroll-behavior: smooth;
	scroll-padding-top: 64px;
}

body {
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 14px;
  font-style: normal;
	line-height: 1.8;
	color: var(--black);
	display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
	background: #FCFEFF;
	overflow-x: hidden;
}

.eg-title {
	font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
}

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

.br_sp {
	display: block;
}

.br_pc {
	display: none;
}

.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s, transform 0.8s;
}

.fade.active {
  opacity: 1;
  transform: translateY(0px);
}

.rise-up {
	overflow: hidden;
  opacity: 0;
	transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rise.active .rise-up {
  opacity: 1;
	transform: matrix(1, 0, 0, 1, 0, 0);
}

.float.active::after {
	transform: translate(-50%, -50%);
  animation: floating 2s ease-in-out infinite alternate-reverse;
}

@keyframes floating {
  0% {
    transform: translate(-50%, -55%);
  }
  100% {
    transform: translate(-50%, -52%);
  }
}

.header {
	display: grid;
	grid-template-columns: auto;
	padding: 12px;
}

.header__top-link {
	display: flex;
	width: fit-content;
}

.recruit-logo {
	width: clamp(122px, 32.5vw, 250px);
}

/* entry-menu */
.entry-btn {
	position: fixed;
	top: 16px;
	right: 12px;
	padding: 0;
	display: grid;
	align-content: center;
	text-align: center;
	color: var(--white);
	font-size: clamp(12px, 3.2vw, 24.5px);
	background: var(--black, #343434);
	border-radius: 100vmax;
	line-height: 1;
	z-index: calc(infinity);
	min-height: 26px;
}

.open-label {
	padding: 0.5em 1em;
}

.entry-btn input {
	display: none;
}

.entry-btn .open-label,
.entry-btn .close-label {
	cursor: pointer;
}

.entry-btn .open-label {
	display: block;
	width: 100%;
	text-align: center;
}

.entry-modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 100;
	background: rgba(96, 169, 238, 0.95);
}

.modal__open:checked+label+input+.entry-modal {
	display: block;
	animation: modal-animation .5s;
}

.entry-modal__content-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100svh;
	z-index: 2;
	border-radius: 5px;
	overflow-y: scroll;
}

.close-btn {
	color: #fff;
	text-align: center;
	z-index: calc(infinity);
	position: absolute;
	right: 12px;
	bottom: 20px;
}

.entry-modal__content {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 40px 20px 120px;
}

.entry-modal__recruit-category {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.entry-modal__entry-list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 16px;
}

.entry-modal__title {
	width: 100%;
	font-size: 16px;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: 0.08em;
	text-align: left;
}

.entry-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 20px;
	font-weight: 700;
	font-size: 16px;
	color: var(--blue-700);
	letter-spacing: 0.04em;
	line-height: 150%;
	background: var(--white);
	width: 100%;
	border-radius: 8px;
	text-align: left;
}

.entry-link--other {
	color: var(--white);
	background: transparent;
	border: 1px solid var(--white);
}

.entry-link::after {
	content: url(../img/modal-arrow_blue.svg);
	display: inline-block;
	transition: 0.5s;
	width: 24px;
	height: 24px;
}

.entry-link--other::after {
	content: url(../img/modal-external-icon.svg);
	display: inline-block;
	width: 24px;
	height: 24px;
}

@keyframes modal-animation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* global-menu */
.global-menu {
	position: fixed;
	bottom: 20px;
	right: 12px;
	z-index: 5;
	width: clamp(72px, 19.2vw, 144px);
	height: clamp(72px, 19.2vw, 144px);
}

.global-menu img {
	width: 100%;
}

.modal-checkbox {
  display: none;
}

.global-menu__modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(96, 169, 238, 0.95);
}

.close-btn {
  position: absolute;
  bottom: 20px;
  right: 12px;
  cursor: pointer;
}

.global-menu__content-wrap {
  position: relative;
  width: 100%;
	height: 100svh;
  padding: 60px 0 120px;
  margin: auto;
  overflow-y: scroll;
}

.modal-checkbox:checked + .global-menu__modal {
  display: flex;
	animation: modal-animation .5s;
}

.global-menu__modal-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.global-menu__lp-list {
	order: 1;
}

.order-change {
	order: 2;
}

.global-menu__lower-page-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	order: 3;
}

.global-menu__page-list {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.global-menu__page-link {
	display: flex;
	align-items: center;
	color: var(--white);
	font-size: 14px;
	line-height: 130%;
	gap: 8px;
}

.global-menu__page-link::after {
	content: "";
	background: url(../img/link-arrow_white.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 20px;
	height: 20px;
	min-width: 20px;
	vertical-align: middle;
}

.global-menu__page-link--m {
	font-size: 18px;
	font-weight: 500;
}

.global-menu__page-link--l {
	justify-content: space-between;
	font-size: 18px;
	font-weight: 500;
	padding: 20px;
	border-top: 1px solid var(--white);
}

.global-menu__page-link--l:last-of-type {
	border-bottom: 1px solid var(--white);
}

.global-menu__page-link--m::after,
.global-menu__page-link--l::after {
	content: "";
	background: url(../img/link-arrow_white.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 24px;
	height: 24px;
	min-width: 24px;
	vertical-align: middle;
}

.footer {
	background: var(--blue-50);
	padding: 40px 20px;
	line-height: 1.3;
	font-size: 14px;
	border-top: 1px solid var(--blue-600);
}

.footer__menu {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: -16px;
}

.footer__right-column {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.footer__wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 0px;
}

.footer__lower-page-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 20px;
}

.footer__entry-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer__page-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__page-link {
	font-weight: 700;
}

.footer__page-link--s {
	font-size: 12px;
	font-weight: 500;
}

.footer__page-link--top {
	padding-bottom: 16px;
}

.footer__sns-list {
	display: flex;
	align-items: center;
	gap: 4px;
}

.footer__sns-sub-group {
	display: flex;
	align-items: center;
	gap: 16px;
}

.footer__policy-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer__policy-link {
	display: flex;
	align-items: center;
	font-size: 12px;
	gap: 4px;
	font-weight: 500;
}

.footer__policy-link::after {
	content: "";
	background: url(../img/external-link-icon.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.copyright {
	font-size: 10px;
	color: var(--gray-700);
}

.pickup {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 4.2vw, 32px);
	margin-top: clamp(20px, 5.3vw, 40px);
	padding-top: clamp(20px, 5.3vw, 40px);
	border-top: 1px solid var(--blue-600);
}

.pickup__title {
	font-size: clamp(16px, 4.2vw, 32px);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.2em;
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pickup__card {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items: center;
	gap: clamp(16px, 4.2vw, 32px);
}

.pickup__card::after {
	content: "";
	background: url(../img/external-link-icon.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: clamp(24px, 6.4vw, 48px);
	height: clamp(24px, 6.4vw, 48px);
	min-width: 24px;
	vertical-align: middle;
	grid-area: 1 / 8 / 2 / 9;
}

.pickup__img {
	grid-area: 1 / 1 / 2 / 3;
}

.pickup__profile {
	grid-area: 1 / 3 / 2 / 8;
	line-height: 1.3;
}

.pickup__name {
	font-size: clamp(18px, 4.8vw, 36px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--blue-900);
	padding-bottom: 0.1em;
}

.pickup__occupation {
	font-size: clamp(14px, 3.7vw, 28px);
	color: var(--blue-700);
}


@media only screen and (min-width: 768px) {
	.body {
		min-height: 100svh;
	}

	.br_sp {
		display: none;
	}

	.br_pc {
		display: block;
	}

	.header {
		display: grid;
		grid-template-columns: auto;
		padding: 1.6vw;
		/* 1280pxで約20px */
		margin: 1.6vw 1.6vw 0;
		border-top: 1px solid var(--blue-600);
		border-left: 1px solid var(--blue-600);
		border-right: 1px solid var(--blue-600);
	}

	.recruit-logo {
		width: clamp(96px, 12.5vw, 240px);
	}

	/* entry-menu */
	.entry-btn {
		padding: 0;
		font-size: clamp(10px, 1.25vw, 24px);
		top: 3.2vw;
		right: 3.2vw;
	}

	.open-label {
		padding: 0.6em 1.5em;
	}

	.entry-modal__content-wrap {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 16px;
	}

	.entry-modal__content {
		grid-column: 3 / 11;
		padding: 120px 0;
	}

	.entry-modal__entry-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* global-menu */
	.global-menu {
		position: fixed;
		bottom: 3.2vw;
		right: 3.2vw;
		z-index: 5;
		width: clamp(72px, 8.4vw, 180px);
		height: clamp(72px, 8.4vw, 180px);
	}

	.modal-open-button img {
		width: 100%;
	}

	.close-btn {
		position: absolute;
		bottom: 3.2vw;
		right: 3.2vw;
		cursor: pointer;
		width: clamp(72px, 8.4vw, 180px);
		height: clamp(72px, 8.4vw, 180px);
	}

	.close-btn img {
		width: 100%;
		height: 100%;
	}

	.global-menu__content-wrap {
		padding: 120px 3.2vw;
	}

	.global-menu__modal-content {
		display:grid;
		grid-template-columns: repeat(12, 1fr);
		justify-content: center;
		gap: 3em 1em;
		max-width: 1200px;
		margin: 0 auto;
	}

	.global-menu__lp-list {
		grid-area: 2 / 9 / 3 / 13;
		order: 3;
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	.order-change {
		grid-area: 1 / 1 / 2 / 9;
	}

	.global-menu__lower-page-list {
		grid-area: 2 / 1 / 3 / 9;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 40px;
	}

	.global-menu__page-list {
		padding: 0;
		width: calc(50% - 40px);
	}

	.global-menu__page-link--l {
		border: 1px solid var(--white);
		padding: 20px 20px 18px;
		border-radius: 4px;
	}

	/* footer */
	.footer {
		padding: 0px 1.6vw 1.6vw;
		position: relative;
	}

	.footer__wrap {
		padding: 3.2vw;
		border-bottom: 1px solid var(--blue-600);
		border-left: 1px solid var(--blue-600);
		border-right: 1px solid var(--blue-600);
		gap: 3em;
	}

	.footer__menu {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		gap: auto;
		margin-top: -16px;
	}

	.footer__entry-list {
		flex: 1;
		gap: clamp(10px, 1.25vw, 24px);
	}

	.footer__right-column {
		flex: 3;
		gap: clamp(24px, 4.8vw, 60px);;
	}

	.footer__lower-page-list {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 40px 20px;
		max-height: clamp(156px, 17.2vw, 323px);
	}

	.footer__page-list {
		max-width: calc(100% / 3);
		gap: clamp(10px, 1.25vw, 24px);
	}

	.footer__policy-list {
		flex-direction: row;
		gap: clamp(10px, 1.25vw, 24px);
	}

	.footer__page-link {
		font-size: clamp(10px, 1.25vw, 24px);
		font-weight: 700;
	}

	.footer__page-link--s,
	.footer__policy-link {
		font-size: clamp(8.5px, 1.1vw, 21px);
		font-weight: 500;
	}

	.footer__policy-link::after {
		width: clamp(10px, 1.25vw, 24px);
		height: clamp(10px, 1.25vw, 24px);
	}

	.footer__sns-list,
	.footer__sns-sub-group {
		gap: clamp(10px, 1.25vw, 24px);
	}

	.footer__sns-link img {
		height: clamp(19px, 2.5vw, 48px);
		width: auto;
	}

	.copyright {
		font-size: clamp(6px, 0.78vw, 15px);
	}

	.main {
		display: block;
		margin: 0 1.6vw;
		padding: 0 4.8vw;
		border-left: 1px solid var(--blue-600);
		border-right: 1px solid var(--blue-600);
	}

	.pickup {
		grid-area: 1 / 8 / 3 / 13;
		padding-top: 0;
		padding-left: clamp(36px, 4.7vw, 90px);
		margin-top: 0;
		border-top: none;
		border-left: 1px solid var(--blue-600);
		gap: clamp(12px, 1.6vw, 30px);
	}

	.pickup__title {
		font-size: clamp(12px, 1.6vw, 30px);
	}

	.pickup__name {
		font-size: clamp(12px, 1.6vw, 30px);
	}

	.pickup__occupation {
		font-size: clamp(10px, 1.25vw, 24px);
	}

	.pickup__card {
		grid-template-columns: repeat(5, 1fr);
		gap: clamp(10px, 1.25vw, 24px);
		transition: 0.5s;
	}

	.pickup__card::after {
		content: "";
		background: url(../img/external-link-icon.svg) no-repeat center center;
		background-size: contain;
		display: inline-block;
		width: clamp(19px, 2.5vw, 48px);
		height: clamp(19px, 2.5vw, 48px);
		min-width: 19px;
		vertical-align: middle;
		grid-area: 1 / 8 / 2 / 9;
		transition: transform .5s ease-in-out;
	}

	.pickup__card:hover {
		scale: 0.98;
	}
}