@charset "UTF-8";

/* ============================================================
   リセット・ベース
   ============================================================ */
a,
button,
div {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
}
html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: 4.2666666667vw;
  }
}


@media (orientation: landscape) and (max-width: 932px) and (max-height: 500px) {
  html {
    font-size: 2.3vw;
  }
}

:root{
--content-gutter: 60px;
--content-width: min(1920px, calc(100% - (var(--content-gutter) * 2)));
--content-inner-gutter: 20px;
--black: #000;
--black-brown: #1D0909;
--white: #fff;
--border-black: #000000B3;
--border-grey: #afafaf;
--cyanTeal:#238D9E;
--brandTeal:#1192A7;
--markerGreen: #00901E;
--blue-subtle: #00ABEB;
--gradient-start: #27A2B6;
--gradient-end: #2C9B5A;
--color-category: #006C8A;
--font-base: "Noto Sans JP", sans-serif;
--font-heading: "Oswald", sans-serif;
--font-basic: max(1rem, 16px);
--bg-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='2' height='2' fill='%23ccc'/%3E%3C/svg%3E");

  --font-12: max(0.75rem, 12px);
  --font-13: max(0.8125rem, 13px);
  --font-14: max(0.875rem, 14px);
  --font-15: max(0.9375rem, 15px);
  --font-18: max(1.125rem, 17px);
  --font-19: max(1.1875rem, 17px);
  --font-20: max(1.25rem, 17px);
  --font-22: max(1.375rem, 17px);
  --font-24: max(1.5rem, 18px);
  --font-26: max(1.625rem, 19px);
  --font-28: max(1.75rem, 21px);
  --font-30: max(1.875rem, 21px);
  --font-32: max(2rem, 22px);
  --font-34: max(2.125rem, 23px);
  --font-36: max(2.25rem, 24px);
}
@media (max-width: 768px) {
  :root {

    --content-width: 100%;
    --content-inner-gutter: clamp(10px, 4vw, 20px);
	  --font-basic: 0.9375rem;
  }
}
*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
	font-size: var(--font-basic);
  font-weight: 500;
  line-height: 1.5;
}


/* ============================================================
   レイアウト共通
   ============================================================ */
.l-container {
	width: var(--content-width);
	margin-inline: auto;
}

.l-container__inner {
	padding-inline: var(--content-inner-gutter);
}

.l-section {
	background: var(--white);
}

.l-part {
	padding-top: 80px;
}

.c-text {
	font-size: var(--font-basic);
	line-height: 1.7;
}

.pc_only {
	display: block;
}

.sp_only {
	display: none;
}

@media (max-width: 768px) {
	.pc_only {
		display: none;
	}

	.sp_only {
		display: block;
	}
}

/* ============================================================
   共通コンポーネント
   ============================================================ */
.c-link-button {
	font-size: 0.875rem;
	font-weight: 600;
}

.c-heading {
	display: flex;
	flex-direction: column;
}

.c-heading__ja {
	font-size: max(3.25rem, 28px);
	font-weight: 700;
	line-height: 1;
}

.c-heading__en {
	font-family: var(--font-heading);
	font-size: var(--font-18);
	text-transform: uppercase;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

@media (max-width: 768px) {
	.c-heading__ja {
		font-size: 1.5rem;
	}

	.c-heading__en {
		font-size: 0.8125rem;
	}
}

.c-section-header {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c-section-header__heading {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: var(--font-18);
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.c-section-header__title {
	font-size: max(2.375rem, 26px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.c-heading--sub {
	font-size: var(--font-24);
	line-height: 1.75;
	font-weight: 700;
}

.c-page-heading__lead {
	margin-top: 30px;
	color: var(--black-brown);
}

.c-page-heading__lead span {
	display: inline-block;
	font-size: var(--font-13);
	font-weight: 400;
}

.c-page-heading__lead.c-page-heading__lead--half {
	max-width: 640px;
	width: 50vw;
}

@media (max-width: 1024px) {
	.c-page-heading__lead {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}

	.c-page-heading__lead.c-page-heading__lead--half {
		max-width: initial;
		width: 100%;
	}
}

@media (max-width: 768px) {
	.c-section-header--small .c-section-header__heading {
		font-size: 1rem;
	}

	.c-section-header--small .c-section-header__title {
		font-size: 1.625rem;
	}
}

.c-header__marker {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-heading);
	font-size: var(--font-15);
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 0.1em;
}

.c-header__marker::before {
	content: "";
	width: 0.625em;
	height: 0.625em;
	background-color: var(--markerGreen);
	border-radius: 50%;
	flex-shrink: 0;
}

.c-arrow-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 12.3125rem;
	width: fit-content;
	color: var(--black);
	font-size: var(--font-14);
	font-weight: 600;
	border-bottom: 2px solid var(--black);
	padding-bottom: 0.7em;
}

.c-arrow-link__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8758em;
	height: 1.8758em;
	background: var(--black);
	border-radius: 2.6px;
	overflow: hidden;
}

.c-arrow-link__icon svg {
	display: block;
	color: var(--white);
	transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.c-arrow-link:hover .c-arrow-link__icon svg {
		transform: translateX(4px);
	}

	.c-arrow-link:hover .c-arrow-link__icon {
		border: none;
		background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
		color: var(--white);
	}
}

.c-arrow-link-down {
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--black);
	font-size: var(--font-14);
	font-weight: 600;
	padding-bottom: 15px;
}

@media (hover: hover) and (pointer: fine) {
	.c-arrow-link-down:hover .c-arrow-link-down__icon {
		border: none;
		background: linear-gradient(0deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	}

	.c-arrow-link-down:hover .c-arrow-link-down__icon svg {
		transform: translateY(+2px);
		color: var(--white);
	}
}

.c-arrow-link-down__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8758em;
	height: 1.8758em;
	border: 1px solid var(--black);
	border-radius: 3px;
	overflow: hidden;
}

.c-arrow-link-down__icon svg {
	display: block;
	color: var(--black);
	transition: transform .2s ease;
}

.c-category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-category-list__item {
	display: grid;
	place-items: center;
	background: var(--white);
	border: 1px solid #006C8A;
	border-radius: 100vmax;
	color: var(--color-category);
	font-size: var(--font-13);
	padding-inline: 24px;
	min-height: 30px;
}

@media (max-width: 768px) {
	.c-section-header__heading {
		font-size: 0.8125rem;
	}

	.c-section-header__title {
		font-size: 1.75rem;
	}

	.c-category-list__item {
		font-size: 0.75rem;
		padding-inline: 10px;
		min-height: 24px;
	}

	.c-arrow-link {
		font-size: 0.8125rem;
	}

	.c-arrow-link__icon {

		width: 1.5em;
		height: 1.5em;
	}

	.c-arrow-link__icon svg {
		width: 50%;
		height: 50%;
	}

	.c-arrow-link-down {
		font-size: 0.8125rem;
	}

	.c-arrow-link-down__icon {
		width: 1.5em;
		height: 1.5em;
	}

	.c-arrow-link-down__icon svg {
		width: 50%;
		height: 50%;
	}
}

.c-related-links {
	margin-top: 120px;
}

.c-related-links__content {
	background: #EAF1F4;
	padding: var(--content-inner-gutter);
}

.c-related-links__list {

	display: flex;
	align-items: stretch;
	gap: 20px;
}

.c-related-links__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 1;
	width: 100%;
	background: var(--white);
	padding: 30px;
}

.c-related-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.875em;
	height: 2.875em;
	border-radius: 2.42px;
	border: 1px solid #000000B3;
	background: var(--white);
	color: var(--black);
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.c-related-links__icon svg {
	display: block;
	transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.c-related-links__item:hover .c-related-links__icon svg {
		transform: translateX(4px);
	}

	.c-related-links__item:hover .c-related-links__icon {
		border: none;
		background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
		color: var(--white);
	}
}

.c-related-links__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #050505;
}

.c-related-links__text-en {
	font-family: var(--font-heading);
	font-size: var(--font-14);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.c-related-links__text-ja {
	font-size: var(--font-20);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
}

.c-related-links--1col .c-related-links__list {
	justify-content: center;
}

.c-related-links--1col .c-related-links__item {
	max-width: 610px;
}

.c-related-links__heading {
	margin-bottom: 15px;
}

.c-related-links__list.c-related-links__list--thumbnail {
	gap: 15px;
}

.c-related-links__list--narrow {
	max-width: 820px;
	width: 100%;
	margin-inline: auto;
}

.c-related-links__list--thumbnail .c-related-links__item {
	padding: var(--content-inner-gutter);
}

.c-related-links__body {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.c-related-links__image {
	width: 100%;
	max-width: 110px;
	flex: 0 1 110px;
	overflow: hidden;
}

.c-related-links__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.c-related-links__item:hover .c-related-links__img {
		transform: scale(1.1);
	}
}

@media (max-width: 1024px) {
	.c-related-links--3col .c-related-links__list {
		flex-direction: column;
		gap: 10px;
	}

	.c-related-links__body {
		gap: 10px;
	}

	.c-related-links__list--thumbnail .c-related-links__item {
		padding: 10px;
	}

	.c-related-links__text-en {
		font-size: var(--font-13);
	}

	.c-related-links__image {
		max-width: 100px;
		flex: 0 1 100px;
	}
}

@media (max-width: 768px) {
	.c-related-links {
		margin-top: 100px;
	}

	.c-related-links__list {
		flex-direction: column;
		gap: 10px;
	}

	.c-related-links__item {
		width: 100%;
		padding: 10px;
	}

	.c-related-links__icon {
		width: 1.5em;
		height: 1.5em;
	}

	.c-related-links__icon svg {
		width: 50%;
		height: 50%;
	}

	.c-related-links__text-ja {
		font-size: var(--font-basic);
	}

	.c-related-links__image {
		max-width: 80px;
		flex: 0 1 80px;
	}
}

.c-back-to-top {
	margin-block: 50px 20px;
}

.c-arrow-link-back {
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 8.375rem;
	width: fit-content;
	color: var(--black);
	font-size: var(--font-14);
	font-weight: 600;
}

.c-arrow-link-back__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8758em;
	height: 1.8758em;
	border: 1px solid var(--black);
	border-radius: 2.6px;
	overflow: hidden;
}

.c-arrow-link-back__icon svg {
	display: block;
	color: var(--black);
	transition: transform .2s ease;
	transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
	.c-arrow-link-back:hover .c-arrow-link-back__icon svg {
		transform: translateX(-4px) scaleX(-1);
		color: var(--white);
	}

	.c-arrow-link-back:hover .c-arrow-link-back__icon {
		border: none;
		background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	}
}

@media (max-width: 768px) {
	.c-back-to-top {
		margin-block: 40px 20px;
	}
}

/* ============================================================
   MV
   ============================================================ */
.mv {
	position: relative;
	aspect-ratio: 1440 / 465;
	border-bottom: 1px solid var(--border-grey);
}

.mv-tag {
	position: absolute;
	z-index: 200;
	top: 0;
	left: 0;
	aspect-ratio: 40 / 330;
	max-width: 40px;
	height: min(17.19vw, 330px);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.mv-tag::after {
	content: "";
	position: absolute;
	inset: 0;
	height: 60%;
	background: url('https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/common/mvtag_bg.svg') no-repeat center min(2.08vw, 30px) / min(2.36vw, 34px);
}

.mv-tag-label {
	font-family: var(--font-heading);
	writing-mode: vertical-rl;
	text-orientation: sideways;
	font-size: 15px;
	letter-spacing: 0.01em;
	color: var(--white);
	white-space: nowrap;
	padding: 30px 5px min(2.08vw, 30px) 5px;
}

.mv__anchor-nav {
	position: absolute;
	left: 80px;
	bottom: 0;
}

.mv__anchor-list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.mv__anchor-item {
	position: relative;
	padding-inline: 40px;
}

.mv__anchor-item::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #238D9E;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.mv__anchor-item:hover::after {
		transform: scaleX(1);
	}
}

.mv__heading {
	display: flex;
	align-items: center;
	gap: 120px;
	padding-top: 15.2%;
}

.mv__heading.mv__heading--space-between {
	justify-content: space-between;
	gap: 20px;
}

.breadcrumb {
	position: absolute;
	right: 60px;
	bottom: 20px;
}

.breadcrumb__list {
	display: flex;
	align-items: center;
}

.breadcrumb__item {
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	margin-inline: 15px;
	vertical-align: middle;
	background: var(--black);
}

.breadcrumb__item--current {
	color: #808080;
}

@media (max-width: 1024px) {
	.mv {
		aspect-ratio: 1440 / 640;
	}

	.mv--no-border {
		border-bottom: none;
	}

	.mv__heading.mv__heading--column {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.mv__anchor-nav {
		bottom: -80px;
		left: 0;
		width: 100%;
		padding-left: 120px;
		border-bottom: 1px solid var(--border-grey);
	}

	.mv__anchor-item {
		position: relative;
		padding-inline: 10px;
	}
}

@media (max-width: 768px) {
	.mv {
		aspect-ratio: 375 / 372;
	}

	.mv__heading {
		gap: 0;
		padding: 45% 0 0 30px;
	}

	.mv-tag {
		aspect-ratio: 37 / 210;
		max-width: 37px;
		height: min(60vw, 210px);
	}

	.mv-tag::after {
		height: 60%;
		background: url('https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/common/mvtag_bg.svg') no-repeat center top / min(4.56vw, 34px);
	}

	.mv-tag-label {
		font-size: 11px;
		letter-spacing: 0.01em;
		padding: 0 5px min(4.03vw, 30px) 0;
	}

	.mv__anchor-list {
		justify-content: center;
	}

	.breadcrumb {
		right: clamp(20px, 5.33vw, 60px);
	}

	.breadcrumb__item {
		font-size: 10px;
	}

	.breadcrumb__item + .breadcrumb__item::before {
		margin-inline: 5px;
	}

	.mv__anchor-nav {
		padding: 10px 0 0;
	}

	.mv__anchor-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: start;
		gap: 0 10px;
		width: var(--content-width);
		padding-inline: var(--content-inner-gutter);
		margin-inline: auto;
	}

	.mv__anchor-item {
		padding-inline: 0;
	}

	.mv__anchor-item .c-arrow-link-down {
		gap: 5px;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.page__anchor-item .c-arrow-link-down {
		gap: 5px;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
}

@media (orientation: landscape) and (max-width: 932px) and (max-height: 500px) {
	.mv {
		aspect-ratio: initial;
		height: 100svh;
	}

	.mv__heading {
		gap: 0;
		padding: 20% 0 0 30px;
	}
}

/* ============================================================
   ヘッダー
   ============================================================ */
.header {
	position: fixed;
	top: 30px;
	left: 0;
	width: 100%;
	z-index: 300;
	background: transparent;
	padding-left: 100px;
	padding-right: clamp(10px, calc(10px + (100vw - 768px) * 40 / 1152), 50px);
	transition: background-color .3s ease, border-color .3s ease;
}

.header.is-scrolled {
	background: #FFFFFFB2;
	height: 64px;
	padding: 0 60px;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.home .header.is-scrolled {
	background: #FFFFFFB2;
	height: 64px;
	padding: 0 40px;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 64px;
}

.header__logo-slot {
	width: 238px;
	flex-shrink: 0;
	pointer-events: none;
}

.header__logo {
	position: relative;
	display: block;
	flex-shrink: 0;
	pointer-events: auto;
	transition: opacity .2s ease;
}

.header__logo-img {
	display: block;
	height: auto;
	width: 238px;
	transition: opacity .3s ease;
}

.header__logo-img--green {
	position: absolute;
	top: 0;
	left: 60px;
	opacity: 0;
	width: 205px;
}

.header.is-scrolled .header__logo-img--white {
	opacity: 0;
}

.header.is-scrolled .header__logo-img--green {
	opacity: 1;
}

.mv__logo {
	position: absolute;
	top: 40px;
	left: 100px;
	z-index: 210;
}

.is-scrolled .mv__logo {
	top: 10px;
	left: 20px;
}

.header__nav {
	flex: 1;
	min-width: 0;
}

.header__nav-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding-right: clamp(5px, calc(0.075 * 100vw - 40px), 70px);
}

.is-scrolled .header__nav-list {
	padding-right: clamp(5px, 1vw, 120px);
}

.header__nav-item {
	flex: 1;
	text-align: center;
	position: relative;
}

.header__nav-link {
	display: block;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: color .3s ease;
}

.header__nav-link--no-link {
	cursor: pointer;
}

.header:not(.is-scrolled) .header__nav-link {
	color: var(--white);
}

.header.is-scrolled .header__nav-link {
	color: var(--black);
}

.header__nav-item--top {
	display: none;
}

.header.is-scrolled .header__nav-item--top {
	display: block;
}

.page-sub .header__inner {
	width: 100%;
}

.header__nav {
	flex: none;
	margin-left: auto;
}

.header__nav-item{
  flex: none;
  padding-inline: clamp(8px, 1vw, 20px);
}

.header__dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 11.875rem;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--white);
	box-shadow: 0px 0px 15px 0px #2D5B6E1A;
	opacity: 0;
	text-align: left;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.header__nav-item:hover .header__dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.header__nav-item:focus-within .header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header__dropdown a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	font-size: var(--font-14);
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.header__dropdown a:hover {
		background: #D3E7F0;
	}
}

.header__cta--pc {
	flex-shrink: 0;
}

.header__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	width: 215px;
	height: 52px;
	max-width: 100%;
	background: var(--white);
	border: 3px solid var(--blue-subtle);
	padding-inline: 10px;
}

.page-id-80 .header__cta {
	display: none;
}

.header__cta-image {
	width: 100%;
	max-width: 122px;
	flex-shrink: 1;
}

.header__cta-thumb {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.header__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.625em;
	height: 1.625em;
	border-radius: 1.58px;
	background: var(--blue-subtle);
	color: var(--white);
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.header__cta-icon svg {
	display: block;
	transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.header__cta:hover .header__cta-icon svg {
		transform: translate(2px, -2px);
	}

	.header__cta:hover .header__cta-thumb {
		transform: scale(1.05);
	}
}

@media (max-width: 1200px) {
	.home .header.is-scrolled {
		padding: 0;
		top: 0;
	}

	.header__cta--pc {
		flex-shrink: 1;
	}

	.header__cta {
		width: clamp(190px, 15vw, 215px);
	}
}

.header__sp-cta {
	display: none;
}

.header__burger {
	display: none;
	background: #38383880;
	margin-left: auto;
	position: relative;
	flex-direction: column;
	justify-content: center;
	width: 48px;
	height: 36px;
	border: 0.7px solid #FFFFFF80;
	border-radius: 3px;
	cursor: pointer;
	flex-shrink: 0;
	z-index: 100001;
}

.header__burger span {
	display: block;
	position: absolute;
	left: 14px;
	width: 20px;
	height: 1px;
	background: var(--white);
	border-radius: 1px;
	transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}

.header__burger span:nth-child(1) {
	top: 12px;
}

.header__burger span:nth-child(2) {
	top: 17px;
}

.header__burger span:nth-child(3) {
	top: 22px;
}

.header.is-menu-open .header__burger span:nth-child(1) {
	top: 15px;
	transform: rotate(35deg);
}

.header.is-menu-open .header__burger span:nth-child(2) {
	opacity: 0;
}

.header.is-menu-open .header__burger span:nth-child(3) {
	top: 15px;
	transform: rotate(-35deg);
}

.header__sp-menu {
	display: none;
}

@media (max-width: 1200px) {
	.mv__logo {
		left: 50px;
	}
}

@media (max-width: 1024px) {
	.header__nav {
		display: none;
	}

	.header__cta--pc {
		display: none;
	}

	.header__burger {
		display: flex;
	}

	.header.is-menu-open .header__nav-link {
		color: var(--black);
	}

	.header.is-menu-open .header__logo {
		opacity: 0;
		pointer-events: none;
	}

	.home .header.is-scrolled {
		background: #FFF;
		padding: 0 var(--content-inner-gutter);
	}

	.header.is-scrolled {
		background: #FFF;
		padding: 0 var(--content-inner-gutter);
		top: 0;
	}

	.home .header.is-menu-open {
		background: var(--white);
	}

	.header.is-menu-open {
		background: var(--white);
	}

	.is-scrolled .header__sp-menu {
		height: 100dvh;
	}

	.header__sp-menu {
		display: block;
		position: fixed;
		padding-block: 30px 160px;
		z-index: 100000;
		top: 64px;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		background: var(--white);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	}

	.header__sp-menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.header__sp-group {
		margin-bottom: 24px;
	}

	.header__sp-heading {
		display: block;
		font-weight: 700;
		font-size: var(--font-18);
		line-height: 1;
		margin-bottom: 15px;
	}

	.header__sp-list {
		margin-bottom: 40px;
	}

	.header__sp-list-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 10px;
		font-size: var(--font-basic);
		line-height: 1;
		border-bottom: 1px solid #AFAFAFB2;
	}

	.header__sp-list-link svg {
		flex-shrink: 0;
		margin-left: 12px;
	}

	.header__sp-list-link.header__sp-heading-link {
		padding: 20px 10px 20px 0;
		font-size: var(--font-18);
		font-weight: 700;
		border-bottom: 1px solid #AFAFAFB2;
		margin-bottom: 40px;
	}

	.header__sp-cta {
		display: block;
		margin-inline: auto;
	}

	.header__cta.header__sp-cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		text-decoration: none;
		max-width: 335px;
		width: 100%;
		height: 78px;
		border: 4px solid var(--blue-subtle);
		padding-inline: 15px;
		margin-top: 50px;
	}

	.page-id-80 .header__cta.header__sp-cta {
		display: none;
	}

	.header__cta-image {
		max-width: 171px;
	}

	.header__cta-icon {
		width: 2.3125em;
		height: 2.3125em;
		border-radius: 3.22px;
	}

	.header.is-menu-open {
		background: var(--white);
	}

	.header.is-menu-open #logoSlot,
	.header.is-menu-open .header__logo {
		opacity: 0;
		pointer-events: none;
	}
		.header.is-scrolled .header__logo-img--green {
		left: 0;
	}

	.page-sub .header__logo-img--green {
		left: 0;
	}

}

@media (max-width: 768px) {
	.header__sp-heading {
		font-size: 1.125rem;
	}

	.header__sp-list-link.header__sp-heading-link {
		font-size: 1.125rem;
	}
}

.page-sub .header:not(.is-scrolled) .header__nav-link {
	color: var(--black);
}

.page-sub .header__logo-img--white {
	opacity: 0;
}

.page-sub .header__logo-img--green {
	opacity: 1;
	left: 5px;
	width: 195px;
}

@media (max-width: 768px) {
	.header {
		padding: 20px var(--content-inner-gutter) 0;
		top: 0;
	}

	.home .header.is-scrolled {

		top: 0;
	}

	.header.is-scrolled {
		background: #FFF;
		padding: 0 var(--content-inner-gutter);
		top: 0;
		height: 64px;
	}

	.header.is-menu-open {
		background: var(--white);
	}

	.header__logo-slot {
		width: calc(45.0667vw + 40px); /* マージン分を考慮して枠自体を広げる */
		max-width: 378px; /* 338px + 40px */
	}

	.mv__logo {
		top: 20px;
		left: 10px;
	}

	.is-scrolled .mv__logo {
		left: 10px;
	}

	.header__logo-img--white {
		margin: 20px 0 0 40px!important;
		width: 45.0667vw;
		max-width: 338px;
	}

	.header.is-scrolled .header__logo-img--green {
		width: 45.0667vw;
		max-width: 338px;
		left: 0;
	}

	.page-sub .header__logo-img--green {
		width: 45.0667vw;
		max-width: 338px;
		top: 10px;
		left: 0;
	}
}

@media (orientation: landscape) and (max-width: 932px) and (max-height: 500px) {
	.header {
		position: absolute;
		top: 0;
	}

	.header.is-scrolled {
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		transform: none;
		height: auto;
		padding: inherit;
	}

	.page-sub .header {
		position: relative;
	}

	.header__logo-img--white {
		margin: 10px 0 0 40px!important;
		width: 220px;
	}

	.header.is-scrolled .header__logo-img--green {
		width: 220px;
	}

	.page-sub .header__logo-img--green {
		width: 220px;
		top: -10px;
		left: 40px;
	}
}

/* ============================================================
   Swiper共通矢印
   ============================================================ */
.swiper-button-prev,
.swiper-button-next {
	width: 3.375em;
	height: 3.375em;
	border-radius: 5.4px;
	background: #43434399;
	border: 1px solid var(--white);
	color: var(--white);
}

.swiper-button-next {
	right: 66px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	display: none;
}

.swiper-button-prev svg,
.swiper-button-next svg {
	width: 20px;
	height: 14px;
}

.swiper-button-prev {
	display: none;
}

@media (max-width: 768px) {
	.mySwiper .swiper-slide {
		width: 100%;
	}

	.swiper-button-prev {
		display: flex;
		left: 0;
	}

	.swiper-button-next {
		right: 0;
	}

	.swiper-button-prev,
	.swiper-button-next {
		width: 2.5em;
		height: 3.375em;
	}
}

/* ============================================================
   CTA（section5内・グラデーション帯）
   ============================================================ */
.cta {
	padding-bottom: 160px;
	overflow-x: hidden;
}

.cta__lottie {
	width: 100%;
	pointer-events: none;
	transform: scale(1.8);
	aspect-ratio: 1440 / 340;
}

.cta__lottie svg {
	pointer-events: none;
	transform: translateY(15px) !important;
}

.cta__inner {
	width: 100%;
	height: 100%;
	aspect-ratio: 1320 / 520;
	background: linear-gradient(90deg, rgba(82, 160, 193, 0) 0%, #238D9E 18.42%, #238D9E 26.68%, #1C8E86 54.78%, #00901E 100%) right center / 55.3% 100% no-repeat, url("https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/common/cta-bg.webp") left center / 62.35% 100% no-repeat;
	display: flex;
	gap: 30px;
}

.cta__space,
.cta__content {
	flex: 1;
}

.cta__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: var(--content-inner-gutter) var(--content-inner-gutter) var(--content-inner-gutter) 0;
}

.cta__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	width: 100%;
	flex: 1;
	max-width: 100%;
	background: var(--white);
	border: 6px solid #00ABEB;
	padding-inline: 30px;
}

.cta__link-image {
	width: 100%;
	max-width: 302px;
	flex-shrink: 1;
	border-radius: 4px;
	overflow: hidden;
}

.cta__link-thumb {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.cta__link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 4em;
	height: 4em;
	border-radius: 5px;
	background: #00ABEB;
	color: var(--white);
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cta__link-icon svg {
	display: block;
	transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.cta__link:hover .cta__link-icon svg {
		transform: translate(4px, -4px);
	}
}

.cta__link.cta__link--text {
	border: none;
}

.cta__link--text .cta__link-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #050505;
}

.cta__link-text-en {
	font-size: var(--font-18);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.cta__link-text-ja {
	font-size: var(--font-26);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
}

.cta__link--text .cta__link-icon {
	width: 2.875em;
	height: 2.875em;
	border-radius: 2.42px;
	border: 1px solid #000000B3;
	background: var(--white);
	color: var(--black);
}

@media (hover: hover) and (pointer: fine) {
	.cta__link--text:hover .cta__link-icon svg {
		transform: translateX(4px);
	}

	.cta__link--text:hover .cta__link-icon {
		border: none;
		background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
		color: var(--white);
	}
}

@media (max-width: 1024px) {
	.cta__link-text-en {
		font-size: var(--font-basic);
	}

	.cta__link-text-ja {
		font-size: var(--font-18);
	}
}

@media (max-width: 768px) {
	.cta {
		padding-bottom: 140px;
	}

	.cta .l-container {
		width: 100%;
	}

	.cta__lottie {
		transform: scale(2);
		aspect-ratio: 375 / 220;
	}

	.cta__inner {

		aspect-ratio: 375 / 624;
		background: linear-gradient(180deg, rgba(82, 160, 193, 0) 6.28%, #238D9E 26.35%, #238D9E 37.35%, #1C8E86 74.78%, #00901E 134.99%) center bottom / 100% 73.23% no-repeat, url("https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/common/cta-bg_sp.webp") center top / 100% 46% no-repeat;
		flex-direction: column;
		gap: 0;
	}

	.cta__content {
		gap: 10px;
		padding: 0 var(--content-inner-gutter) var(--content-inner-gutter);
	}

	.cta__link {
		border: 4px solid #00ABEB;
		padding-inline: 20px;
	}

	.cta__link-image {
		width: 54%;
		max-width: 380px;
	}

	.cta__link-icon {
		width: 3.5em;
		height: 3.5em;
	}

	.cta__link-icon svg {
		width: 1em;
		height: 1em;
	}

	.cta__link-img.cta__link-icon svg {
		width: 2.75em;
		height: 2.75em;
	}

	.cta__link--text .cta__link-text {
		display: flex;
		flex-direction: column;
		gap: 10px;
		color: #050505;
	}

	.cta__link-text-en {
		font-size: 0.875rem;
	}

	.cta__link-text-ja {
		font-size: 1.25rem;
	}

	.cta__link--text .cta__link-icon {
		width: 3em;
		height: 3em;
	}
}

/* ============================================================
   フッター
   ============================================================ */
.footer {
	position: relative;
	overflow: hidden;
	z-index: 150;
	aspect-ratio: 1440 / 823;
	color: var(--white);
}

.footer__bg {
	position: absolute;
	top: -10%;
	left: 0;
	width: 100%;
	height: 140%;
	background-image: url('https://www.finese.co.jp/careers/wp-content/themes/Finese/assets/img/common/footer_bg.webp');
	background-size: cover;
	background-position: center;
	z-index: -1;
}

.footer__content {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	padding-top: 160px;
}

.footer-copy {
	grid-column: 1 / -1;
	grid-row: 1;
	align-self: start;
	justify-self: start;
}

.footer__copy-text {
	font-size: max(3.5625rem, 30px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

.footer__company {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	justify-self: end;
	padding-right: 100px;
	padding-top: 100px;
}

.footer__logo {
	max-width: 238px;
	width: 100%;
	height: auto;
}

.footer__address {
	font-size: var(--font-basic);
	line-height: 1.5;
}

.footer__tel {
	font-size: var(--font-basic);
	line-height: 1.5;
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

.footer__link {
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	line-height: 1;
	color: var(--white);
	text-decoration: none;
}

.footer__link-icon.footer__link-icon--external {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.footer__link-icon.footer__link-icon--internal {
	width: 14px;
	height: 10px;
	flex-shrink: 0;
	margin-left: 5px;
}

.footer__copyright {
	position: absolute;
	right: 80px;
	bottom: 80px;
	text-align: right;
	font-size: 0.875rem;
}

@media only screen and (max-width: 1330px) {
	.footer__company {
		padding-top: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.footer__content {
		padding-top: 80px;
	}

	.footer__copy-text {
		font-size: max(2.5rem, 28px);
	}

	.footer__company {
		grid-row: 1;
		padding-right: 0;
	}
}

@media (max-width: 768px) {
	.footer {
		aspect-ratio: 355 / 544;
		padding-inline: 30px;
	}

	.footer__bg {
		background-position: center top;
	}

	.footer__content {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		padding-top: 29.4%;
	}

	.footer-copy {
		grid-column: 1;
		grid-row: 1;
	}

	.footer__copy-text {
		font-size: 1.875rem;
	}

	.footer__company {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		padding-right: 0;
		padding-top: 0;
		margin-top: 44.8%;
	}

	.footer__logo {
		max-width: 100%;
		width: 53%;
	}

	.footer__address {
		font-size: 0.875rem;
	}

	.footer__tel {
		font-size: 0.875rem;
	}

	.footer__links {
		margin-top: 20px;
	}

	.footer__link {
		font-size: 0.8125rem;
	}

	.footer__link-icon.footer__link-icon--external {
		width: 14px;
		height: 14px;
	}

	.footer__copyright {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		bottom: 20px;
		text-align: center;
		font-size: 0.75rem;
		width: 100%;
	}
}