@charset "UTF-8";

:root {
	--primary-color: #4077D5;
	--primary-very-light-color: #ECF7FF;
  --primary-light-color: #DDECFF;
	--primary-medium-color: #66B5F4;
	--primary-dark-color: #335BA5;
	--primary-very-dark-color: #403E58;
	--secondary-color: #FF6F6F;
	--secondary-dark-color: #E55F5F;
	--secondary-light-color: #FFE5E5;
  --text-color: #1E1E1E;
  --border-color: #CCC;
	--gray-color: #777;
	--input-border-color: #8E8E8E;
	--input-placeholder-color: #BDBDBD;
	--white-color: #FFFFFF;
	--highlight-color: #FFED65;

  --container-width: 1000px;
	--container-width-narrow: 800px;
	
	--animation-duration: .6s;
	--animation-timing-function: ease-in-out;

	--radius-default: 10px;
	--radius-small: 4px;
	@media (min-width: 768px) {
		--radius-default: 20px;
		--radius-small: 8px;
	}
	
	--sp-breakpoint: 768;
  --pc-breakpoint: 1024;
  --normalized-factor: calc((100vw - (var(--sp-breakpoint) * 1px)) / (var(--pc-breakpoint) - var(--sp-breakpoint)));
	@media (min-width: 768px) {
    --pc: true;
  }
	@media (max-width: 767px) {
		--sp: true;
	}
	
	--container-padding: 1em;
	@media (min-width: 768px) {
		--container-padding: 2em;
	}

	--shape-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --shape-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --shape-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --shape-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --shape-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --shape-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --shape-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --shape-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
}

@property --formula {
  syntax: '<length>';
  initial-value: 0;
  inherits: false;
}

*,
::before,
::after {
  box-sizing: border-box;
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
  font-size: var(--clamp);

  --formula: var(--clamp);
  --clamp-font-size-number: calc(10000 * tan(atan2(var(--formula), 10000px)));
  --clamp-font-size-number-for-line-height: clamp(
    var(--clamp-min),
    var(--clamp-font-size-number),
    var(--clamp-max)
  );
  --max-line-height: 1.8;
  --font-size-of-max-line-height: 14;
  --min-line-height: 1.25;
  --font-size-of-min-line-height: 50;
  --line-height-diff: calc(var(--max-line-height) - var(--min-line-height));
  --fonf-size-of-line-height-diff: calc(var(--font-size-of-min-line-height) - var(--font-size-of-max-line-height));
  --line-height-slope: calc(var(--line-height-diff) / var(--fonf-size-of-line-height-diff));
  --line-height: clamp(
    var(--min-line-height),
    calc((var(--line-height-diff) - ((var(--clamp-font-size-number-for-line-height) - var(--font-size-of-max-line-height)) * var(--line-height-slope))) + var(--min-line-height)),
    var(--max-line-height)
  );
  line-height: var(--line-height);
}

html {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body::after {
  content: '0';
  display: none;
	@media (min-width: 768px) {
		content: '1';
	}
}

body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 14;
  --clamp-max: 18;
  background-color: var(--white-color);
  margin: 0;
  color: var(--text-color);
}

/*
  MARK: Menu
*/

@media (max-width: 767px) {
	.js-menu,
	.js-menu-layer,
	.js-menu__container,
	.js-menu-switch,
	.js-menu-switch__icon,
	.js-menu-switch__icon::before,
	.js-menu-switch__icon::after {
	  display: block;
	}
	.js-menu,
	.js-menu-layer,
	.js-menu-switch {
	  overflow: hidden;
	}
	.js-menu,
	.js-menu-layer {
	  position: fixed;
	  visibility: hidden;
	}
	.js-menu-layer,
	.js-menu__container {
	  width: 100%;
	  height: 100%;
	}
	.js-menu {
	  width: 100%;
	  height: 100%;
	  transition: transform 0.3s ease-in-out 0s, visibility 0s step-end 0.3s;
	  z-index: 10001;
	  top: 0;
	  right: 0;
	  transform: translateX(100%);
		padding-block-start: 6em;
	}
	.js-menu-layer {
	  top: 0;
	  left: 0;
	  z-index: 10000;
	  transition: visibility 0s step-end 0.3s, opacity 0.3s ease-in-out 0s;
	  background-color: var(--white-color);
	  opacity: 0;
	  cursor: default;
	}
	.js-menu__container {
	  overflow-x: hidden;
	  overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.js-menu-switch {
	  position: relative;
	  width: 65px;
	  height: 65px;
	  z-index: 10002;
	  appearance: none;
	  background-color: transparent;
	  border-width: 0;
	  text-decoration: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	}
	.js-menu-switch__icon {
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  transition: background-color 0.15s ease-in-out;
	  background-color: var(--text-color);
	}
	.js-menu-switch__icon,
	.js-menu-switch__icon::before,
	.js-menu-switch__icon::after {
	  position: absolute;
	  width: 20px;
	  height: 3px;
	}
	.js-menu-switch__icon::before,
	.js-menu-switch__icon::after {
	  content: '';
	  transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
	  background-color: var(--text-color);
	}
	.js-menu-switch__icon::before {
	  top: -8px;
	}
	.js-menu-switch__icon::after {
	  bottom: -8px;
	}
	.is-menu-open .js-menu,
	.is-menu-open .js-menu-layer {
	  visibility: visible;
	  transition-delay: 0s;
	}
	.is-menu-open .js-menu {
	  transform: translateX(0);
	}
	.is-menu-open .js-menu-layer {
	  opacity: 1;
	}
	.is-menu-open .js-menu-switch__icon {
	  background-color: transparent;
	}
	.is-menu-open .js-menu-switch__icon::before,
	.is-menu-open .js-menu-switch__icon::after {
	  background-color: var(--text-color);
	  transition-delay: 0.15s;
	}
	.is-menu-open .js-menu-switch__icon::before {
	  transform: translateY(8px) rotate(45deg);
	}
	.is-menu-open .js-menu-switch__icon::after {
	  transform: translateY(-8px) rotate(-45deg);
	}
}

.js-menu-layer,
.js-menu-switch {
	@media (min-width: 768px) {
		display: none;
	}
}

/*
  MARK: Header
*/

.header {
	display: block flex;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding-block: .5em;
	padding-inline: var(--container-padding) 0;
	@media (min-width: 768px) {
		padding-inline: var(--container-padding);
	}
	z-index: 1000;
}

.header__logo {
	position: relative;
	z-index: 10002;
	img {
		transition: transform .2s ease-in-out;
	}
	a:hover {
		@media (any-hover: hover) {
			img {
				transform: scale(1.05);
			}
		}
	}
}

.menu__list {
	display: block flex;
	gap: var(--container-padding);

	li.is-current {
		font-weight: bold;
	}

	@media (max-width: 767px) {
		flex-direction: column;
		padding-inline: var(--container-padding);
		gap: 0;
		
		li {
			border-bottom: 1px solid var(--border-color);
		}
		a {
			display: block;
			font-weight: bold;
			padding-block: calc(var(--container-padding) * 1.5);
		}
	}

	a {
		&:hover {
			@media (any-hover: hover) {
				text-decoration: underline;
				text-underline-offset: .15em;
			}
		}
	}
}

/*
  MARK: MV
*/

.mv {
	display: block grid;
	place-items: center;
	width: 100%;
	position: relative;
	z-index: 1;
	padding-block: 30vw 15vw;
	@media (min-width: 1200px) {
		padding-block: 22.5vw 22.5vw;
	}
	@media (max-width: 767px) {
		padding-block: 80vw 20vw;
	}
}

.mv--2 {
	margin-block: calc(var(--container-padding) * 2);
	padding-block: 30vw 30vw;
	@media (min-width: 1200px) {
		padding-block: 22.5vw 22.5vw;
		margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 4);
	}
	@media (max-width: 767px) {
		padding-block: 40vw 40vw;
	}
}

.mv__message-outer {
	position: relative;
	z-index: 4;
}

.mv__message {
	position: relative;
	z-index: 1;
}

.mv__message-frame {
	position: absolute;
	left: 0;
	top: 5vw;
}

.mv__message-button-outer {
	position: relative;
	padding-inline: var(--container-padding);
	z-index: 1;
}

.mv__characters {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 3;
	img {
		max-width: 40vw;
	}
	@media (max-width: 767px) {
		img {
			max-width: 70vw;
		}
	}
}

.mv__man {
	position: absolute;
	left: 35vw;
	top: 35%;
	transform: translateX(-50%) translateY(-50%);
	@media (max-width: 767px) {
		left: 20%;
		top: 35%;
	}
}

.mv__woman {
	position: absolute;
	right: 35vw;
	top: 33%;
	transform: translateX(50%) translateY(-50%);
	@media (max-width: 767px) {
		right: 22.5%;
		top: 40%;
	}
}

.mv--2 .mv__man {
	left: 15vw;
	top: 30%;
	@media (min-width: 1200px) {
		left: 50vw;
		margin-left: -400px;
	}
	@media (max-width: 767px) {
		left: 20%;
		top: 5%;
		transform: translateX(-50%);
		img {
			max-width: 30vw;
		}
	}
}

.mv--2 .mv__woman {
	right: 15vw;
	top: 30%;
	@media (min-width: 1200px) {
		right: 50vw;
		margin-right: -400px;
	}
	@media (max-width: 767px) {
		right: 20%;
		top: 5%;
		transform: translateX(50%);
		img {
			max-width: 30vw;
		}
	}
}

.mv__decoration {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.mv__decoration-item {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	img {
		display: block;
		width: 110%;
		height: 110%;
		object-fit: cover;
		object-position: center;
	}
	@media (max-width: 767px) {
		top: 2.5%;
		img {
			width: 105%;
			height: 105%;
		}
	}
}

.mv--2 .mv__decoration-item--1,
.mv--2 .mv__decoration-item--2 {
	@media (max-width: 767px) {
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 576 / 224;
		img {
			width: 110%;
			height: 110%;
		}
	}
}

.mv--2 .mv__decoration-item--3,
.mv--2 .mv__decoration-item--4 {
	@media (max-width: 767px) {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 576 / 281;
		img {
			width: 110%;
			height: 110%;
		}
	}
}

.mv__holl {
	display: block grid;
	place-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	img {
		display: block;
		position: relative;
	}
}

.mv--2 .mv__holl {
	@media (max-width: 767px) {
		img {
			position: relative;
			width: 150%;
			height: auto;
			max-width: 700px;
		}
	}
}

.mv__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-light-color);
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: fill;
		object-position: center;
		filter: brightness(0) invert(1);
	}
}

.mv__content {
	display: block grid;
	gap: var(--container-padding);
	position: relative;
	z-index: 5;
	color: var(--white-color);
	text-align: center;
	padding-inline: var(--container-padding);
}

/*
  MARK: Hero
*/

.hero {
	background-color: var(--primary-light-color);
	position: relative;
	width: 100%;
	padding-block-start: 8em;
	@media (max-width: 767px) {
		padding-block-start: 6em;
	}
	&.hero--home {
		padding-block-start: 0;
	}
}

.hero__title,
.hero__headline-title-ja {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) translateY(50%);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	z-index: 2;
}

.hero__text {
	display: block grid;
	gap: calc(var(--container-padding) / 2);
	place-items: center;
	padding-inline: var(--container-padding);
	padding-block-end: calc(var(--container-padding) * 2);
	position: relative;
	z-index: 2;
	@media (min-width: 768px) {
		padding-inline: 0;
	}
}

.hero__heading {
	display: block grid;
	gap: calc(var(--container-padding) / 2);
	place-items: center;
	text-align: center;

	@media (min-width: 768px) {
		br {
			display: none;
		}
	}
}

.hero__heading-label {
	--clamp-min: 24;
  --clamp-max: 40;
	display: block;
	background-color: var(--highlight-color);
	font-weight: bold;
	padding-inline: .25em;
}

.hero__heading-meassage {
	--clamp-min: 48;
  --clamp-max: 64;
	display: block;
	font-weight: bold;
}

.hero__description {
	--clamp-min: 16;
  --clamp-max: 32;
	font-weight: bold;
	text-align: center;
}

.hero__lead {
	--clamp-min: 14;
  --clamp-max: 24;
	font-weight: bold;
	text-align: center;
	color: var(--primary-color);
}

.marquee {
  overflow: hidden;
}

.marquee-list {
  display: block flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee-item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;	
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hero__images {
	position: relative;
	z-index: 1;
	height: 325px;
	@media (max-width: 767px) {
		height: 160px;
		img {
			width: 100px;
			height: auto;
		}
	}
}

.hero__images-list {
	position: absolute;
	top: 0;
	left: 0;
}

.hero__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: fill;
		object-position: center;
		filter: brightness(0) invert(1);
	}
}

.hero__stars {
	display: none;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;

	@media (min-width: 768px) {
		display: block;
		height: 450px;
	}
}

.hero__stars-item {
	position: absolute;
}

.hero__stars-item--1,
.hero__stars-item--4 {
	top: 0;
	--inline-start: 5%;

	img {
		animation: KIRAKIRA 2s linear 0s infinite;
	}
}

.hero__stars-item--1 {
	left: var(--inline-start);
}

.hero__stars-item--4 {
	right: var(--inline-start);
}

.hero__stars-item--2,
.hero__stars-item--3 {
	top: 15%;
	--inline-start: 20%;

	img {
		animation: KIRAKIRA 2s linear 1s infinite;
	}
}

.hero__stars-item--2 {
	left: var(--inline-start);
}

.hero__stars-item--3 {
	right: var(--inline-start);
}

@keyframes KIRAKIRA {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.5);
	}
	100% {
		transform: scale(1);
	}
}

.hero__headline {
	background-color: var(--primary-very-dark-color);
	position: relative;
	margin-block-end: calc(var(--container-padding) * 4);
	@media (min-width: 768px) {
		margin-block-end: calc(var(--container-padding) * 3);
	}
}

.hero__headline-title-en {
	position: relative;
	top: 5px;
	img {
		display: block;
		width: 100%;
		height: auto;
	}
	@media (min-width: 768px) {
		img {
			width: auto;
			position: relative;
			left: 0;
		}
	}
	@media (min-width: 1200px) {
		img {
			width: auto;
			position: relative;
			left: 50%;
			margin-left: -600px;
		}
	}
}

/*
  MARK: Breadcrumb
*/

.breadcrumb {
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: calc(var(--container-padding) * 2.5) var(--container-padding);
}

.breadcrumb__list {
	width: 100%;
	white-space: nowrap;
}

.breadcrumb__item {
	position: relative;
	display: inline-block;
	margin-inline-end: .5em;

	a {
		&:hover {
			@media (any-hover: hover) {
				text-decoration: underline;
				text-underline-offset: .15em;
			}
		}
	}

	&:not(:first-child) {
		padding-inline-start: 1.5em;
		&::before {
			content: '';
			width: 0.5em;
			height: 0.5em;
			border-right: 1px solid var(--text-color);
			border-top: 1px solid var(--text-color);
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%) rotate(45deg);
		}
	}

	&:last-child {
		a {
			pointer-events: none;
		}
	}
}

/*
  MARK: Heading
*/

.heading {
	--clamp-min: 36;
  --clamp-max: 44;
	font-weight: bold;
	color: var(--primary-color);
	margin-block-end: 1em;

	&::before{
		content: attr(data-en);
		--clamp-min: 16;
  	--clamp-max: 30;
		display: block;
		font-size: .5em;
		color: var(--gray-color);
		font-weight: normal;
		margin-block-end: .15em;
	}
}

.heading--sm {
	--clamp-min: 24;
  --clamp-max: 32;
}

.heading-image {
	display: block grid;
	place-items: center;
	margin-block-end: 3.5em;

	& + p {
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
		margin-block-end: 2.4em;
		margin-block-start: -2em;
	}
}

.heading-highlight {
	--clamp-min: 32;
  --clamp-max: 40;
	font-weight: bold;
	background-color: var(--highlight-color);
	padding-inline: .25em;
	margin-block-end: 1em;
	width: fit-content;
	margin-inline: auto;
}

.heading-small {
	--clamp-min: 20;
  --clamp-max: 32;
	font-weight: bold;
	margin-block-end: 2em;
	text-align: center;
	font-weight: bold;
}

/*
  MARK: Content & Upper Components
*/

.content {
	width: calc(100% - var(--container-padding) * 2);
	max-width: var(--container-width);
	margin-inline: auto;
	margin-block-end: calc(var(--container-padding) * 5);

	p:not(:first-child) {
		margin-block-start: 1em;
	}
}

.content--narrow {
	max-width: var(--container-width-narrow);
}

.content-full {
	width: 100%;
	position: relative;
	padding-block: calc(var(--container-padding) * 8) calc(var(--container-padding) * 3);

	@media (min-width: 768px) {
		padding-block: calc(var(--container-padding) * 3) calc(var(--container-padding) * 2);
	}

	&.content-full--normal-margin {
		margin-block-end: calc(var(--container-padding) * 5);
		padding-block: 0;
	}
}

.content-full__inner {
	width: calc(100% - var(--container-padding) * 2);
	max-width: var(--container-width);
	margin-inline: auto;
	padding-block: calc(var(--container-padding) * 2);

	&:last-child {
		padding-block-end: 0;
	}
}

.content-full__inner--no-margin {
	padding-block: 0;
}

.content-full--bg {
	background-color: var(--primary-light-color);
}

.content-full__lead {
	--clamp-min: 24;
  --clamp-max: 40;
	display: block grid;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%) translateY(-50%);
	place-items: center;
	gap: .25em;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding-inline: var(--container-padding);

	span > span {
		display: inline;
		background-color: var(--highlight-color);
	}
}

.media {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	width: 100%;
	@media (min-width: 768px) {
		grid-template-columns: 57fr 43fr;
		gap: calc(var(--container-padding) * 1.5);
	}
}

.media__image {
	display: block grid;
	align-content: start;
	gap: var(--container-padding);
	@media (min-width: 768px) {
		gap: calc(var(--container-padding) / 2);
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
		border-radius: var(--radius-default);
	}
}

.cell-list__item {
	display: block grid;
	width: 100%;
	padding-block: var(--container-padding);
	border-bottom: 1px solid var(--border-color);
	@media (min-width: 768px) {
		grid-template-columns: 1fr 3fr;
		gap: var(--container-padding);
	}
}

.cell-list--has-sp–gap .cell-list__item {
	@media (max-width: 767px) {
		gap: calc(var(--container-padding) / 2);
	}
}

.cell-list__item--head {
	@media (max-width: 767px) {
		display: none;
	}
}

.cell-list__heading {
	font-weight: normal;
	color: var(--gray-color);
}

.link {
	color: var(--primary-color);
	position: relative;
	padding-inline-end: .75em;
	&::after {
		content: '';
		width: 0.5em;
		height: 0.5em;
		border-right: 1px solid var(--primary-color);
		border-top: 1px solid var(--primary-color);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
	&:hover {
		@media (any-hover: hover) {
			text-decoration: underline;
			text-underline-offset: .15em;
		}
	}
}

/*
  MARK: Home
*/

.spotlight {
	background-color: var(--primary-very-dark-color);
	position: relative;
	overflow: hidden;
}

.spotlight__inner {
	width: calc(100% - var(--container-padding) * 2);
	max-width: var(--container-width);
	margin-inline: auto;
	padding-block: 0 calc(var(--container-padding) * 5);
}

.spotlight__content {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	@media (min-width: 768px) {
		grid-template-columns: 4fr 3fr;
		gap: 0;
	}
	@media (min-width: 1200px) {
		grid-template-columns: 1fr 1fr;
	}
}

.spotlight__image {
	@media (max-width: 767px) {
		margin-inline: calc(var(--container-padding) * -2);
		margin-block-start: -30vw;
		img {
			width: 100%;
			height: auto;
			max-width: none;
		}
	}
	@media (min-width: 768px) {
		order: 2;
		margin-inline-end: -40%;
		img {
			width: 100%;
			height: auto;
			max-width: none;
		}
	}
}

.spotlight__text {
	display: block grid;
	gap: var(--container-padding);
	@media (min-width: 768px) {
		padding-block-start: calc(var(--container-padding) * 5);
		align-content: start;
	}
}

.spotlight__title {
	--clamp-min: 24;
  --clamp-max: 40;
	font-weight: bold;
	margin-block-end: .5em;
	
	span {
		color: var(--primary-very-dark-color);
		background-color: var(--highlight-color);
	}
}

.spotlight__description {
	color: var(--white-color);
}

/*
  MARK: Recruit
*/

.messages {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	row-gap: calc(var(--container-padding) * 4);
	width: 100%;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	@media (min-width: 768px) {
		grid-template-columns: 2fr 3.75fr 2fr;
		grid-template-areas: 'left center right';
		gap: var(--container-padding);
	}
}

.messages__image-left {
	text-align: right;
	@media (min-width: 768px) {
		grid-area: left;
		text-align: center;
	}
}

.messages__image-right {
	text-align: left;
	@media (min-width: 768px) {
		grid-area: right;
		text-align: center;
	}
}

.messages__text {
	text-align: center;
	@media (max-width: 767px) {
		grid-column: span 2;
	}
	@media (min-width: 768px) {
		grid-area: center;
	}
}

.features {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	width: 100%;
	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--container-padding);
	}
}

.features__item {
	display: block grid;
	gap: calc(var(--container-padding) * 1);
	text-align: center;
	align-content: start;
	@media (min-width: 768px) {
		gap: calc(var(--container-padding) / 2);
	}
}

.features__image {
	position: relative;
	width: 100%;
	border-radius: var(--radius-default);
	overflow: hidden;
	@media (max-width: 767px) {
		aspect-ratio: 335 / 248;
		max-width: 30em;
		margin-inline: auto;
	}
	img {
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
		@media (max-width: 767px) {
			height: 100%;
			object-fit: cover;
		}
	}
	span {
		color: var(--white-color);
		line-height: 1;
		font-size: 10em;
		font-weight: bold;
		position: absolute;
		bottom: -0.15em;
		left: 0;
		z-index: 1;
	}
}

.support-list {
	display: block grid;
	gap: calc(var(--container-padding) * 4);
	width: 100%;
	@media (min-width: 768px) {
		gap: calc(var(--container-padding) * 3);
	}
}

.support-list__item {
	display: block grid;
	gap: calc(var(--container-padding) * 3);
	@media (min-width: 768px) {
		gap: calc(var(--container-padding) * 1);
	}

	.heading {
		margin-block-end: 0;
	}

	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
	}

	&:nth-child(odd) {
		@media (min-width: 768px) {
			.support-list__image {
				order: 2;
			}
			.support-list__description {
				order: 1;
			}
		}
	}
}

.support-list__image {
	position: relative;
	text-align: center;
	@media (min-width: 768px) {
		align-content: center;
	}
	img {
		position: relative;
		z-index: 2;
	}
	span {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 75%;
		max-width: 20em;
		aspect-ratio: 1 / 1;
		background-color: var(--primary-very-light-color);
		border-radius: 100%;
		margin: auto;
	}
}

.support-list__description {
	background-color: var(--primary-light-color);
	padding: 1em 1.5em;
	border-radius: var(--radius-default);
	position: relative;
	z-index: 2;
}

.support-animation-line {
	display: none;
	@media (min-width: 768px) {
		display: block;
		position: absolute;
		background-color: var(--primary-very-light-color);
		width: 90px;
		height: 40em;
		top: 50%;
		z-index: 1;
	}
}

.support-animation-line--1 {
	transform: rotate(50deg);
	transform-origin: top right;
	right: 50%;
	margin-right: -45px;
}

.support-animation-line--2 {
	transform: rotate(-50deg);
	transform-origin: top left;
	left: 50%;
	margin-left: -45px;
}

.steps {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	width: 100%;
	@media (min-width: 768px) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.steps-outer {
	position: relative;
}

.steps {
	@media (min-width: 768px) {
		width: calc(100% - var(--container-padding) * 2);
		max-width: var(--container-width);
		margin-inline: auto;
	}
}

.steps__item {
	--base-step-margin: 5em;
	display: block grid;
	align-items: start;
	align-content: start;
	@media (max-width: 767px) {
		grid-template-columns: 6em 1fr;
		grid-template-rows: repeat(3, auto);
		grid-template-areas: 'heading label'
												'heading span'
												'heading info';
		column-gap: calc(var(--container-padding) * 2);
	}
	@media (min-width: 768px) {
		gap: calc(var(--container-padding) * 0.5);
		&:nth-child(1) {
			margin-block-start: calc(var(--base-step-margin) * 3);
		}
		&:nth-child(2) {
			margin-block-start: calc(var(--base-step-margin) * 2);
		}
		&:nth-child(3) {
			margin-block-start: calc(var(--base-step-margin) * 1);
		}
	}
}

.steps__label {
	color: var(--primary-medium-color);
	font-weight: bold;
	span, strong {
		font-size: 1.2em;
	}
	@media (max-width: 767px) {
		grid-area: label;
	}
	@media (min-width: 768px) {
		span, strong {
			display: block;
			text-align: center;
			line-height: 1;
		}
		span {
			font-size: 1.5em;
		}
		strong {
			font-size: 3em;
		}
	}
}

.steps__heading {
	display: block grid;
	place-items: center;
	background-color: var(--primary-medium-color);
	color: var(--white-color);
	padding: 1em;
	border-radius: 100%;
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	z-index: 2;
	@media (max-width: 767px) {
		grid-area: heading;
	}
}

.steps__span {
	padding-block-end: 1em;
	border-bottom: 1px solid var(--border-color);
	margin-block-end: 1em;
	@media (min-width: 768px) {
		text-align: center;
		border-bottom: none;
		padding-block-end: 0;
		margin-block-end: 0;
	}
	@media (max-width: 767px) {
		grid-area: span;
	}
}

.steps__info {
	list-style: disc;
	padding-inline-start: 1em;
	@media (max-width: 767px) {
		grid-area: info;
	}
}

.steps-wrapper {
	position: relative;
	padding-inline: var(--container-padding);
	@media (min-width: 768px) {
		padding-inline: 0;
		overflow: hidden;
		margin-block: calc(var(--container-padding) * -1) calc(var(--container-padding) * -2);
	}
}

.steps-animation-arrow {
	display: none;
	position: absolute;
	top: 1em;
	left: 3em;
	margin-left: 0;
	height: 100%;
	img {
		display: block;
		width: auto;
		height: 100%;
		max-width: none;
		transform: translateX(-50%);
	}
	@media (max-width: 767px) {
		display: block;
	}
	@media (min-width: 768px) {
		margin-left: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
		margin-left: 0;
		img {
			width: 100%;
			height: 38em;
			transform: none;
		}
	}
	@media (min-width: 1200px) {
		display: block;
	}
}

.features__heading {
	--clamp-min: 18;
  --clamp-max: 20;
	font-weight: bold;
}

.skills-up {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	width: 100%;
	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
		gap: var(--container-padding);
	}
}

.skills-up__text {
	display: block grid;
	place-items: center;
	gap: var(--container-padding);
	align-content: center;

	& > * {
		margin-block-end: 0;
	}
}

.skills-up__image {
	text-align: center;
}

.not-wanted {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	width: 100%;
	margin-block-end: calc(var(--container-padding) * 10);
	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--container-padding);
		margin-block-end: 0;
	}
}

.not-wanted__item {
	text-align: center;
}

/*
  MARK: Form
*/

.form {
	display: block grid;
	gap: var(--container-padding);
	width: 100%;
	--clamp-min: 16;
  --clamp-max: 20;
}

.form__item {
	display: block grid;
	gap: calc(var(--container-padding) / 4);
	width: 100%;
}

.form__radios {
	display: block flex;
	flex-wrap: wrap;
	gap: var(--container-padding);
}

.form__input.form__input--number {
	display: block flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--container-padding) / 4);
	input[type="number"] {
		width: 10em;
	}
}

.form__input {
	width: 100%;
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	textarea {
		width: 100%;
		padding: .5em 1em;
		border: 1px solid var(--input-border-color);
		border-radius: var(--radius-small);
		font-size: inherit;
		color: inherit;
		&::placeholder {
			color: var(--input-placeholder-color);
		}
	}
	textarea {
		height: 20em;
		line-height: 1.5;
		padding: 1.5em;
	}
}

.form__radio {
	display: block flex;
	flex-wrap: wrap;
	gap: calc(var(--container-padding) / 4);
}

.form__label {
	display: block flex;
	flex-wrap: wrap;
	font-weight: bold;
	align-items: center;
	gap: calc(var(--container-padding) / 4);
}

.form__label-required {
	display: inline-block;
	font-size: .6em;
	background-color: var(--secondary-color);
	color: var(--white-color);
	padding: .2em .5em;
	border-radius: var(--radius-small);
	vertical-align: middle;
}

.privacy-policy {
	border: 1px solid var(--input-border-color);
	border-radius: var(--radius-small);
	font-size: .8em;
	height: 28em;
	overflow-y: auto;
	padding: 2.1em;
}

.privacy-policy__inner {
	display: block;
	white-space: pre-wrap;
	margin-block: 0;
	line-height: 1.5;
}

.form__button-outer {
	text-align: center;
}

.form__button {	
	display: block;
	text-align: center;
	width: 100%;
	max-width: 25em;
	margin-inline: auto;
	background-color: var(--primary-color);
	color: var(--white-color);
	padding: .5em 1em;
	border-radius: calc(infinity * 1px);
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	transition: background-color .2s ease-in-out;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-dark-color);
		}
	}
}

.aside {
	width: calc(100% - var(--container-padding) * 2);
	max-width: var(--container-width-narrow);
	margin-inline: auto;
	padding-block: calc(var(--container-padding) * 2);

	@media (max-width: 767px) {
		padding-block: calc(var(--container-padding) * 4);
	}

	&:has(.aside__lead) {
		padding-block-start: calc(var(--container-padding) * 0.6);
		padding-block-end: calc(var(--container-padding) * 5);
		@media (max-width: 767px) {
			padding-block-start: calc(var(--container-padding) * 1.4);
			padding-block-end: calc(var(--container-padding) * 6);
		}
	}
}

.aside__lead {
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	margin-block-end: 1em;
}

.aside__buttons {
	display: block grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--container-padding);
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

/*
  MARK: Buttons
*/

.button {	
	display: block;
	text-align: center;
	width: 100%;
	max-width: 25em;
	margin-inline: auto;
	background-color: var(--primary-color);
	color: var(--white-color);
	padding: .5em 1em;
	border-radius: calc(infinity * 1px);
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	transition: background-color .2s ease-in-out;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-dark-color);
		}
	}
}

.button--secondary {
	background-color: var(--secondary-color);
}

.button--secondary:hover {
	@media (any-hover: hover) {
		background-color: var(--secondary-dark-color);
	}
}

/*
  MARK: Lower Components
*/

/*
  MARK: Tabs
*/

.tabs {
	width: 100%;
	overflow: hidden;
}

.tabs__inner {
	overflow-y: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tab-list {
	display: block flex;
	gap: 1em;
	padding-block-end: var(--container-padding);
}

.tab-list__item {
	min-width: fit-content;
	max-width: fit-content;
}

.tab-list__link {
	display: block;
	color: var(--text-color);
	background-color: var(--white-color);
	border-radius: calc(infinity * 1px);
	padding: .5em 5em;
	transition: background-color .1s ease-in-out, color .1s ease-in-out;

	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-medium-color);
			color: var(--white-color);
		}
	}
}

.tab-list__link.is-active {
	background-color: var(--primary-medium-color);
	color: var(--white-color);
}

/*
  MARK: Table
*/

.table {
	display: none;
	gap: var(--container-padding);
	padding: calc(var(--container-padding) * 2);
	background-color: var(--white-color);
	border-radius: var(--radius-default);
}

.table.is-active {
	display: block grid;
}

.tr {
	display: block grid;
	gap: calc(var(--container-padding) / 2);
	border-bottom: 1px solid var(--border-color);
	align-items: start;
	justify-content: start;
	padding-block-end: var(--container-padding);
	
	@media (min-width: 768px) {
		grid-template-columns: 1fr 3fr;
		gap: var(--container-padding);
	}

	&:last-child {
		border-bottom: none;
		padding-block-end: 0;
	}
}

.th {
	font-weight: bold;
	color: var(--primary-color);
}

.td {
	display: block;
	text-align: left;
}

/*
  MARK: FAQ
*/

.faqs {
	display: block grid;
	gap: calc(var(--container-padding) * .5);
}

.faq {
	background-color: var(--white-color);
	border-radius: var(--radius-default);
	font-weight: bold;
	overflow: hidden;
}

.faq__question,
.faq__answer {
	display: block;
  position: relative;
  padding: .5em 3em .5em 5.5em;
}

.faq__question {
	cursor: pointer;
	transition: background-color .1s ease-in-out;

	&:hover {
		@media (any-hover: hover) {
			background-color: #F5F5F5;
		}
	}
}

.faq__question span,
.faq__answer p {
	display: block;
	text-align: left;
	padding-block: 1em;
}

.faq__question i,
.faq__answer i {
	display: block grid;
	place-items: center;
  background-color: var(--text-color);
  width: 3.5em;
  height: 3.5em;
  border-radius: 100%;
  font-style: normal;
	position: absolute;
	top: 50%;
	left: 1em;
	transform: translateY(-50%);
}

.faq__answer i {
	background-color: var(--primary-color);
}

.faq__question i::after,
.faq__answer i::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: var(--text-color);
  clip-path: var(--shape-triangle-right);
  left: 75%;
  top: 75%;
  transform: rotate(45deg);
	transform-origin: 50% 50%;
}

.faq__answer i::after {
	background-color: var(--primary-color);
}

.faq__question::before,
.faq__question::after {
  content: '';
  display: block;
  position: absolute;
  width: 1em;
  height: 3px;
	background-color: var(--text-color);
  transform-origin: 50% 50%;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}

.faq__question::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq[open] .faq__question::after {
  display: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}


/*
  MARK: Footer
*/

.footer {
	display: block grid;
	gap: var(--container-padding);
	@media (max-width: 767px) {
		gap: calc(var(--container-padding) * 2);
	}
}

.footer__images {
	width: 100%;
	img {
		border-radius: var(--radius-default);
		max-width: none;
		width: 100%;
		height: auto;
	}
}

.footer__sp-fixed-content {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: var(--container-padding);
	z-index: 1000;
	@media (min-width: 768px) {
		display: none;
	}
}

.footer__sp-fixed-content-link {
	display: block;
	font-size: 1.2em;
	padding: .6em 1em;
	background-color: var(--primary-color);
	color: var(--white-color);
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	border-radius: calc(infinity * 1px);
	transition: background-color .2s ease-in-out;
}

.footer__sp-fixed-content-link:hover {
	@media (any-hover: hover) {
		background-color: var(--primary-dark-color);
	}
}

.footer__logo {
	img {
		transition: transform .2s ease-in-out;
	}
	a:hover {
		@media (any-hover: hover) {
			img {
				transform: scale(1.05);
			}
		}
	}
	@media (max-width: 767px) {
		text-align: center;
	}
}

.footer__top,
.footer__bottom {
	padding-inline: var(--container-padding);
	width: 100%;
}

.footer__bottom {
	display: block flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	gap: calc(var(--container-padding) * 2);

	@media (min-width: 768px) {
		flex-direction: row-reverse;
		gap: var(--container-padding);
		padding-block-end: var(--container-padding);
	}
}

.footer__nav {
	@media (max-width: 767px) {
		max-width: 20em;
		width: 100%;
		margin-inline: auto;
	}
}

.footer__nav-list {
	display: block flex;
	flex-wrap: wrap;
	gap: var(--container-padding);
	width: 100%;

	@media (max-width: 767px) {
		li {
			width: calc(50% - var(--container-padding) / 2);
			position: relative;
			padding-inline-start: 1em;
		}
		a::before {
			content: '';
			border-top: 0.35em solid transparent;
			border-bottom: 0.35em solid transparent;
			border-left: 0.6em solid var(--text-color);
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	a {
		&:hover {
			@media (any-hover: hover) {
				text-decoration: underline;
				text-underline-offset: .15em;
			}
		}
	}
}

.footer__copyright {
	small {
		font-size: .9em;
	}
	@media (max-width: 767px) {
		text-align: center;
		padding-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 6);
		border-top: 1px solid var(--border-color);
		width: 100%;
	}
}

/*
  MARK: アニメーション
*/

:root {
  --animation-duration: 0.5s;
  --animation-timing-function: cubic-bezier(.645, .045, .355, 1);
}

.mv--1 {
	.mv__holl img,
	.mv__bg img {
		transform: scale(.75);
		transform-origin: 50% 50%;
		transition: transform .5s var(--animation-timing-function), opacity .5s var(--animation-timing-function);
		opacity: 0;
	}
	.mv__message-frame img {
		transform: scale(0) rotate(-10deg);
		transform-origin: 50% 50%;
		transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55) .3s, opacity .5s cubic-bezier(.68, -.55, .265, 1.55) .3s;
		opacity: 0;
	}
	.mv__message img {
		transform: scale(0) rotate(-10deg);
		transform-origin: 50% 50%;
		transition: transform .5s cubic-bezier(.68, -.55, .265, 1.55) .5s, opacity .5s cubic-bezier(.68, -.55, .265, 1.55) .5s;
		opacity: 0;
	}
	.mv__decoration-item img {
		transform: scale(.75) rotate(-10deg);
		transform-origin: 50% 50%;
		transition: transform .5s var(--animation-timing-function), opacity .5s var(--animation-timing-function);
		opacity: 0;
	}
	.mv__man img,
	.mv__woman img {
		transform-origin: 50% 100%;
		transition: transform .5s var(--animation-timing-function) 1s, opacity .5s var(--animation-timing-function) 1s;
		opacity: 0;
	}
	.mv__man img {
		transform: scale(.75) translate(10px, 10px);
	}
	.mv__woman img {
		transform: scale(.75) translate(-10px, 10px);
	}
	--base-animation-delay: 1s;
	--process-animation-delay: .05s;
	.mv__decoration-item--1 img {
		transition-delay: calc(var(--base-animation-delay) + (var(--process-animation-delay) * 0));
	}
	.mv__decoration-item--2 img {
		transition-delay: calc(var(--base-animation-delay) + (var(--process-animation-delay) * 1));
	}
	.mv__decoration-item--3 img {
		transition-delay: calc(var(--base-animation-delay) + (var(--process-animation-delay) * 2));
	}
	.mv__decoration-item--4 img {
		transition-delay: calc(var(--base-animation-delay) + (var(--process-animation-delay) * 3));
	}
	.mv__message-button-outer {
		opacity: 0;
		transform: scale(1.15);
		/* transition: opacity .25s cubic-bezier(.68, -.55, .265, 1.55) 1.75s, transform .25s cubic-bezier(.68, -.55, .265, 1.55) 1.75s; */
		transition: opacity .25s var(--animation-timing-function) 1.75s, transform .25s var(--animation-timing-function) 1.75s;
	}
	&.is-loaded {
		.mv__holl img,
		.mv__bg img {
			opacity: 1;
			transform: scale(1);
		}
		.mv__message-frame img {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}
		.mv__message img {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}
		.mv__message-outer {
			opacity: 1;
			transform: translateY(0);
		}
		.mv__decoration img {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}
		.mv__man img {
			opacity: 1;
			transform: scale(1) translate(0, 0);
		}
		.mv__woman img {
			opacity: 1;
			transform: scale(1) translate(0, 0);
		}
		.mv__message-button-outer {
			opacity: 1;
			transform: scale(1);
		}
	}
}

.mv__decoration-item--1 {
	animation: mv-deco-1 4s ease-out 0s infinite;
}
.mv__decoration-item--2 {
	animation: mv-deco-1 4s ease-out -1s infinite;
}
.mv__decoration-item--3 {
	animation: mv-deco-2 4s ease-out -2s infinite;
}
.mv__decoration-item--4 {
	animation: mv-deco-2 4s ease-out -3s infinite;
}
.mv__man {
	animation: mv-deco-1 4s ease-out -1s infinite;
}
.mv__woman {
	animation: mv-deco-1 4s ease-out 0s infinite;
}

@keyframes mv-deco-1 {
	0%, 100% {
		translate: 0 10px;
	}
	50% {
		translate: 0 -10px;
	}
}

@keyframes mv-deco-2 {
	0%, 100% {
		translate: 0 5px;
	}
	50% {
		translate: 0 -5px;
	}
}

.hero--recruit {
	--transition-duration: .35s;
	.marquee-list {
		li {
			opacity: 0;
			transform: scale(.9) translateY(5px);
			transition: opacity var(--transition-duration) var(--animation-timing-function) 1s, transform var(--transition-duration) var(--animation-timing-function) 1s;
		}
	}
	
	.hero__stars {
		opacity: 0;
		transition: opacity 1s var(--animation-timing-function) 1s;
	}

	.hero__heading-label {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity var(--transition-duration) var(--animation-timing-function), transform var(--transition-duration) var(--animation-timing-function);
	}

	.hero__heading-meassage {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity var(--transition-duration) var(--animation-timing-function) .1s, transform var(--transition-duration) var(--animation-timing-function) .1s;
	}

	.hero__description {
		opacity: 0;
		transform: translateY(5px);
		transition: opacity var(--transition-duration) var(--animation-timing-function) .4s, transform var(--transition-duration) var(--animation-timing-function) .4s;
	}

	.hero__lead {
		opacity: 0;
		transform: translateY(5px);
		transition: opacity var(--transition-duration) var(--animation-timing-function) .6s, transform var(--transition-duration) var(--animation-timing-function) .6s;
	}

	&.is-loaded {
		.marquee-list li {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
		.hero__stars {
			opacity: 1;
		}
		.hero__heading-label,
		.hero__heading-meassage,
		.hero__description,
		.hero__lead {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.hero {
	.hero__title img {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity var(--animation-duration) var(--animation-timing-function) .1s, transform var(--animation-duration) var(--animation-timing-function) .1s;
	}
	&.is-loaded {
		.hero__title img {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.marquee-item {
		--base-animation-delay: 4s;
		--animation-duration: 32s;
		&:nth-child(1),
		&:nth-child(8n + 1) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 4) infinite;
			}
		}
		&:nth-child(2),
		&:nth-child(8n + 2) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 7) infinite;
			}
		}
		&:nth-child(3),
		&:nth-child(8n + 3) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 2) infinite;
			}
		}
		&:nth-child(4),
		&:nth-child(8n + 4) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 5) infinite;
			}
		}
		&:nth-child(5),
		&:nth-child(8n + 5) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 0) infinite;
			}
		}
		&:nth-child(6),
		&:nth-child(8n + 6) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 6) infinite;
			}
		}
		&:nth-child(7),
		&:nth-child(8n + 7) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 3) infinite;
			}
		}
		&:nth-child(8),
		&:nth-child(8n + 8) {
			img {
				animation: marquee-item-animation var(--animation-duration) var(--animation-timing-function) calc(var(--base-animation-delay) * 1) infinite;
			}
		}
	}
}

@keyframes marquee-item-animation {
	0%, 9%, 11%, 100% {
		transform: scale(1) translateY(0);
	}
	10% {
		transform: scale(.9) translateY(10%);
	}
}

.animation-circle {
	scale: 0;
	transition: scale .5s var(--animation-timing-function);

	&.has-scroll-animation.is-scrolled {
		scale: 1;
	}
}

.animation-circle-list {
	--base-animation-delay: 0.1s;
	& > li .steps__heading {
		scale: 0;
		transition: scale .5s var(--animation-timing-function);
	}
	& > li:nth-child(2) .steps__heading {
		transition-delay: calc(var(--base-animation-delay) * 1);
	}
	& > li:nth-child(3) .steps__heading {
		transition-delay: calc(var(--base-animation-delay) * 2);
	}
	& > li:nth-child(4) .steps__heading {
		transition-delay: calc(var(--base-animation-delay) * 3);
	}
	&.has-scroll-animation.is-scrolled {
		& > li .steps__heading {
			scale: 1;
		}
	}
}

.animation-line {
	scale: 0;
	transition: scale .5s var(--animation-timing-function) .2s;

	&.has-scroll-animation.is-scrolled {
		scale: 1;
	}
}

.animation-arrow {
  scale: 0 .1;
	opacity: 0;
	transform-origin: 0% 88%;
	transition: scale .5s var(--animation-timing-function) .5s, opacity .5s var(--animation-timing-function) .5s;

	@media (max-width: 767px) {
		scale: 0 0;
		opacity: 1;
		transform-origin: 0% 0%;
	}
}

.has-scroll-animation.is-scrolled + .animation-arrow {
	scale: 1 1;
	opacity: 1;
}

.animation-lightup {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-slideup-list {
  --base-animation-delay: 0.1s;
  & > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
  }
  & > *:nth-child(2) {
    transition-delay: calc(var(--base-animation-delay) * 1);
  }
  & > *:nth-child(3) {
    transition-delay: calc(var(--base-animation-delay) * 2);
  }
  & > *:nth-child(4) {
    transition-delay: calc(var(--base-animation-delay) * 3);
  }
  & > *:nth-child(5) {
    transition-delay: calc(var(--base-animation-delay) * 4);
  }
  & > *:nth-child(6) {
    transition-delay: calc(var(--base-animation-delay) * 5);
  }
  & > *:nth-child(7) {
    transition-delay: calc(var(--base-animation-delay) * 6);
  }

  &.has-scroll-animation.is-scrolled {
    & > * {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.animation-slideup {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-slide-left {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-slide-right {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}


/*
  MARK: Contact Form 7
*/

.wpcf7-list-item.first {
	margin-inline-start: 0;
}

.wpcf7-not-valid-tip {
	margin-block-start: .5em;
}

.wpcf7-response-output {
	margin-block-start: .5em !important;
}

/*
	MARK: Content Area
*/

.content .supplement {
	font-size: .9em;
	margin-block-start: 3em !important;
}